資訊專欄INFORMATION COLUMN
摘要：自定義擴(kuò)展背景在項(xiàng)目開發(fā)過程中，發(fā)現(xiàn)生產(chǎn)模式下日志文件依然存在，通過百度得出的結(jié)果是在生產(chǎn)模式下一系列方法全部重寫這種方法表示一看就不舒服，無法接受。接下來教大家如何使用，具體詳情可以去上找文檔。
Angular6+ webpack自定義擴(kuò)展
在項(xiàng)目開發(fā)過程中，發(fā)現(xiàn)生產(chǎn)模式下console.log()日志文件依然存在，通過百度得出的結(jié)果是在生產(chǎn)模式下console.xx一系列方法全部重寫
window.console.log = ()=>{}
這種方法表示一看就不舒服，無法接受。所以想著想著@angular/cli
底層是webpack,而且代碼壓縮用的是UglifyJs，所以想著能不能擴(kuò)展一配置項(xiàng)，讓我把console全部給我過濾掉，最后去Issues上找了許久，發(fā)現(xiàn)angular6+不支持eject，最后有人推薦了一個(gè)工具庫ngx-build-plus，不需要改很多東西就能在現(xiàn)有項(xiàng)目進(jìn)行集成。接下來教大家如何使用，具體詳情可以去github上找文檔。
1.運(yùn)行 ng add ngx-build-plus，在angular7版本會(huì)自動(dòng)一鍵配置好，但是6版本中可能會(huì)出現(xiàn)安裝不成功，這時(shí)候請直接npm install ngx-build-plus --save-dev，然后angular.json文件中更改以下兩處地方:
"build": {
- "builder": "@angular-devkit/build-angular:browser"
+ "builder": "ngx-build-plus:build"
...
},
"serve": {
- "builder": "@angular-devkit/build-angular:dev-server"
+ "builder": "ngx-build-plus:dev-server"
...
}
2.接下來根目錄下新建webpack.extra.js文件
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
optimization: {
minimizer: [new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true
}
}
})]
}
};
記得```npm install uglifyjs-webpack-plugin --save-dev```
3.進(jìn)行生產(chǎn)環(huán)境編譯
ng build --extraWebpackConfig webpack.extra.js --prod
4.好了就這么簡單。寫的比較簡陋，有問題可以留言，實(shí)在沒弄懂我就弄個(gè)示例出來。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100753.html
摘要：起因看到項(xiàng)目中很多，使用方法都是使用標(biāo)簽引入。解決方案在網(wǎng)上了解到可以將眾多文件合并成一個(gè)，用的方式區(qū)分不同的圖案，然后使用標(biāo)簽引用。在版本廢棄了命令，不再支持自定義，而中的未提供自定義或是執(zhí)行外掛腳本的配置。 起因 看到項(xiàng)目中很多svg，使用方法都是使用img標(biāo)簽引入。于是就想將svg合并，像字體圖標(biāo)那樣方便使用。 解決方案 ??在網(wǎng)上了解到可以將眾多svg文件合并成一個(gè)，用symb...
摘要：在編寫組件之前，首先看一下組件的使用方式和效果其中標(biāo)簽是自定義組件，利用符號進(jìn)行雙向綁定，下面標(biāo)簽顯示所綁定的值。 在包裝輸入類型的組件時(shí)，我們需要向外暴露數(shù)據(jù)接口，用戶輸入和輸出，這時(shí)候在組件內(nèi)部定義雙向綁定，會(huì)大大方便用戶的使用。 在編寫組件之前，首先看一下組件的使用方式和效果： app.component：{{testBinding}} 其中binding-test標(biāo)簽是自定義...
摘要：除在全球率先支持外，現(xiàn)已全面應(yīng)用于等主流框架中。本文中，我們將專注于如何將添加到用編寫的應(yīng)用程序中。使用創(chuàng)建應(yīng)用程序。接下來，我們定義適用于這些元素中托管的應(yīng)用程序面板元素和控件的規(guī)則。往期精彩用玩轉(zhuǎn)您的應(yīng)用 為什么選擇WijmoJS？ 作為一款純前端控件集，WijmoJS秉承快如閃電，觸控優(yōu)先的設(shè)計(jì)理念，在提供優(yōu)質(zhì)服務(wù)和產(chǎn)品的同時(shí)，專注于企業(yè)應(yīng)用開發(fā)，不斷優(yōu)化產(chǎn)品架構(gòu)，與時(shí)俱進(jìn)。除在...
閱讀 711·2021-11-18 10:02
閱讀 2249·2021-11-15 18:13
閱讀 3175·2021-11-15 11:38
閱讀 2963·2021-09-22 15:55
閱讀 3684·2021-08-09 13:43
閱讀 2454·2021-07-25 14:19
閱讀 2462·2019-08-30 14:15
閱讀 3458·2019-08-30 14:15
