前端構建之webpack
之前寫了一個前端構建之gulp,一樣的目的寫一個webpack, 內容基本上和gulp一樣,重要用來本身進修紀錄。
為何須要前端構建
不詮釋
本文大抵分為以下幾個內容:
- 範例校驗js代碼(jslint)
- js詮釋器(babel)
- 兼并js代碼(concat)
- 緊縮js代碼(uglify)
- sourcemap
- 範例校驗css代碼(csslint)
- css詮釋器
- 兼并css代碼
- 緊縮css代碼
範例校驗js代碼
1. 用webpack檢測js代碼範例
js檢測東西用來
- 檢測本身寫的js是不是有語法毛病
- 是不是依據我們設定的劃定規矩寫的
經常運用的js檢測東西有jshint、jslint、eslint等, 引薦用eslint。
在webpack中,引薦用eslint這個插件。運用eslint時設置一個.eslintrc
文件,用來編寫自定義js劃定規矩。
假如用到了es模塊,須要在.eslintrc
設置中指定parserOptions的sourceType為module
。
{
"root": true,
"env": {
"browser": true,
"node": true,
"es6": true
},
"parserOptions": {
"sourceType": "module"
},
"extends": "eslint:recommended", //運用引薦的eslint語法
"rules": {
"indent": ["error", 4], //自定義indent為4個空格,級別為error
"semi": ["off", "always"],
"no-console": "off",
"no-unused-vars": "off"
}
}
2. 運用prettier強迫修正js代碼
運用prettier, 依據prettier自定義來強迫修正js代碼。
能夠在運用prettier時增加options,或許豎立一個config文件來設置options也能夠。
參考這裏
{
singleQuote: true,
trailingComma: "all",
bracketSpacing : true,
semi: true,
tabWidth: 4, //定義indent為4個空格
printWidth: 120
}
3. precommit
這個插件目的是在commit之前,實行相干操縱"precommit": "gulp format_js"
4. husky
這個插件目的是豎立和git之間的hooks(鈎子), 一般和precommit連繫用,
比方運用git commit這個敕令時, 會經由過程hooks挪用precommit語句。
如許我們就不須要特地去實行npm run precommit
這個敕令了,
當我們git commit的時刻,husky會自動挪用npm run precommit
。
5. lint-staged
然則另有一個題目, 上面實行完git commit 后,經由過程prettier修正了一切的js文件,
有些便不是我本身修正的文件,也會被強迫修正,
因而能夠經由過程lint-staged這個node模塊來指定stage中的文件。
頭腦很簡樸,只對git stage中的文件處置懲罰。
能夠參考這裏
一般運用它的頭腦:
- 實行git commit時,經由過程husky挪用
precommit
-
precommit
實行lint-staged
,即只對git stage中的文件舉行處置懲罰 - 在
lint-staged
中設置prettier修正js文件(增加一個config文件來設置) - 在
lint-staged
中設置eslintjs檢測文件(增加一個eslintrc文件來設置) - 假如一般經由過程, 則把經由過程prettier修正和eslint檢測的js文件,經由過程git add 增加
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"*.js": [ // 要處置懲罰的js途徑
"prettier --write", //要處置懲罰的文件上修正
"eslint --fix", // 參數fix的意義是:依據eslint設置文件自動修復js文件
"git add"
]
},
prettier 能強迫修正js,eslint –fix也能強迫修正js, 區分是什麼呢???
我的明白prettier更強一點,eslint –fix 強迫修正有限。
這裡有一個注重點
,prettier
的設置參數, 經由過程增加一個config文件來設置。
能夠在運用prettier時增加options,或許豎立一個config文件來設置options也能夠。
“lint-staged”的設置的意義是,
坑對git stage中的文件的操縱,如eslint *.js, git add *.js
, 不能用寫gulp *.js
參考這裏
我增加的是 prettier.config.js
文件,
module.exports = {
printWidth: 120,
parser: "flow",
singleQuote: true,
tabWidth: 4,
bracketSpacing : true,
semi: true
};
eslintrc前面已寫過了。
經由過程lint-staged就不須要第7步中天生一個臨時文件(tempjs)來過渡了,
由於prettier就直接處置懲罰stage終端文件了。
頭腦:
- 經由過程lint-staged獵取想要處置懲罰的js文件
- 經由過程prettier 依據自定義劃定規矩強迫修正要處置懲罰的js文件
- eslint檢測經由過程prettier強迫修正的js文件
- eslint檢測經由過程的話, 將處置懲罰的js文件增加到git stage中
運用es6寫js時,轉化為各個瀏覽器能辨認的es5
6. babel 編譯
babel用來將es6語法轉化為es5, 比方es6中的let轉化為var, 變量字符串拼接轉化為+,等等。
連繫webpack用,就須要運用webpack壯大的loader, 它依賴於babel-core,所以須要裝置babel-loader和babel-core。
本身的明白: babel, babel-core供應了babel的運轉環境(明白有毛病的話,以後糾正)。
只要這兩個(babel, babel-core)還不能完成轉譯,須要transform插件(如babel-preset-env)
然後須要裝置babel-preset-env來將本身寫的es6(源碼),依據當前實行環境(瀏覽器),
轉化為es5(當前環境-瀏覽器能辨認的語法)
兼并js
為何須要兼并js呢,經由過程兼并js文件,能夠削減http要求。
7. concat
經由過程webpack能夠將多個js文件兼并成一個js文件。
一個進口文件,一個輸出。
用法相對簡樸,
如今有一個新的需求task1, 須要零丁寫幾個js文件,
然則不想和其他js兼并到一同,也就是說想零丁兼并這幾個js文件,然後零丁輸出,
這個時刻, 就多進口文件,多個輸出。
比起gulp來,webpack能夠很輕易的完成這個功用。
緊縮js
8. uglify
webpack中能夠運用 uglifyjs-webpack-plugin
用來緊縮js文件
緊縮很簡樸, 獵取js原文件,兼并,然後緊縮
sourcemap
9. sourcemaps
sourcemap 的目的:復原源碼,
什麼意義呢? 當我們將源碼經由兼并,緊縮處置懲罰后,成為了一個文件,不輕易調試。
特別是緊縮后更是面目一新,如許我們在開闢階段不能完成debug,比方打斷點功用就不能夠完成了。
sorucemap就是處理的這個題目。
經由sourcemap處置懲罰后,在目的目次(dest指定的)下,天生一個新文件(與轉譯前對應的map文件),
目次構造與轉譯前完全對應。如許我們就很輕易找到某個文件,然後完成打斷點。
webpack自帶sourcemap功用,只須要增加devtool既能夠。
範例校驗css代碼
範例校驗js寫法的東西有jslint,jshint,近來的eslint等等,
範例校驗css寫法的東西有csslint,stylelint等等。
10. stylelint
stylelint用來檢測css是不是依據設置文件來寫的,是基於postcss的一個檢測東西。
stylefmt是一個依據stylelint的設置文件來強迫修正css文件的插件。有點prettier的意義。
然則能夠不必stylefmt, 在stylelint的選項中增加 --fix
也能夠修正css文件。
npm install postcss stylelint-loader stylelint stylelint-config-standard -save-dev
運用stylelint時,有個規範設置插件, stylelint-config-standard。
以下為 stylelint的設置文件(.stylelintrc)
{
"extends": "stylelint-config-standard", // 運用stylelint的默許規範設置
"rules": {
"declaration-block-trailing-semicolon": null, // 種種劃定規矩,依據本身須要能夠天真設置
"indentation": 4,
"block-no-empty": null,
"max-empty-lines": 1,
"selector-list-comma-newline-after": never-multi-line,
"at-rule-no-unknown": null,
"declaration-colon-space-after": null,
"no-duplicate-selectors" : null,
"no-descending-specificity": null,
"selector-pseudo-element-colon-notation": null,
"no-empty-source": null
}
}
11. postcss
- 當我們用sass的寫法來謄寫css
- 想在css頂用變量,for輪迴等語法
- 想應用 (cssnext)[http://cssnext.io/] 謄寫css時
依據差別瀏覽器自動增加前綴 (autoprefixer)
當我們想在css中完成上述等功用時,能夠用postcss。
postcss就是一個平台,能夠經由過程增加種種插件來完成上述等功用。
npm install postcss-cssnext postcss-simple-vars postcss-nested --save-dev
能夠寫一個postcss的設置文件來特地範例postcss相干的設置,也能夠直接寫在在webpack設置文件中。
css兼并
webpack很輕易的完成css兼并
末了附上完全的(github源代碼)[https://github.com/zhangchch/…]。
以上都是本身的明白,若有毛病的處所,至心求指教。