前端構建之webpack

前端構建之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中的文件處置懲罰。
能夠參考這裏

一般運用它的頭腦:

  1. 實行git commit時,經由過程husky挪用precommit
  2. precommit 實行lint-staged,即只對git stage中的文件舉行處置懲罰
  3. lint-staged中設置prettier修正js文件(增加一個config文件來設置)
  4. lint-staged中設置eslintjs檢測文件(增加一個eslintrc文件來設置)
  5. 假如一般經由過程, 則把經由過程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終端文件了。

頭腦:

  1. 經由過程lint-staged獵取想要處置懲罰的js文件
  2. 經由過程prettier 依據自定義劃定規矩強迫修正要處置懲罰的js文件
  3. eslint檢測經由過程prettier強迫修正的js文件
  4. 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
  1. 當我們用sass的寫法來謄寫css
  2. 想在css頂用變量,for輪迴等語法
  3. 想應用 (cssnext)[http://cssnext.io/] 謄寫css時
  4. 依據差別瀏覽器自動增加前綴 (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/…]。

 以上都是本身的明白,若有毛病的處所,至心求指教。
    原文作者:成cheng
    原文地址: https://segmentfault.com/a/1190000015202251
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞