webpack系列學習-初體驗

webpack系列學習-基本用法一

webpack系列學習-各種loader使用

webpack系列學習-熱更新和壓縮

webpack系列學習-使用eslint和釋出npm包

構建配置抽離成npm包的意義通用性業務開發者無需關注構建配置統一團隊構建指令碼可維護性構建配置合理的拆分README文件，ChangeLog文件質量冒煙測試，單元測試，測試覆蓋率持續整合構建配置管理的可選方案透過配置多個檔案管理不同環境的構建，webpack --config 引數進行控制將構建配置設計成一個庫，比如hjs-webpack,webpack-blocks抽成一個工具進行管理，比如：create-react-app將所有的配置放在一個檔案，透過 --env 引數控制分支選擇構建配置包設計透過多個配置檔案管理不同環境的webpack配置基礎配置：webpack.base.js開發環境：webpack.dev.js生產環境：webpack.prod.jsssr環境：webpack.ssr.js抽離成一個npm包統一管理規範：git commit 日誌，README,ESlint規範質量：冒煙測試，單元測試，測試覆蓋率和ci透過webpack-merge組合配置合併配置：

const merge = require('webpack-merge');module.exports = merge(baseConfig,devConfig)

功能模組設計目錄結構設計使用eslint規範構建指令碼使用 eslint-config-airbnb-baseeslint --fix 可以自動處理空格

module.exports = {        "parser":"babel-eslint",        "extends":"airbnb-base",        "env":{            "browser":true,            "node":true        }    }

安裝

npm i eslint eslint-plugin-import eslint-config-airbnb-base babel-eslint -D

增加npm scripts

"eslint": "eslint --fix"

冒煙測試冒煙測試執行構建是否成功每次構建完成build目錄是否有內容輸出是否有js css等靜態資原始檔是否有html檔案判斷是否構建成功在專案裡面執行構建，看看是否有報錯判斷基本功能是否正常編寫mocha 測試用例實際測試：建立test/smoke/index.js建立test/template把專案遷移到template下安裝rimraf:用於刪除dist目錄

   npm i rimraf -D

在test/smoke建立html-test.js 和 css-js-test.js

安裝mocha

npm i mocha -D

安裝glob-all

npm i glob-all -D

編寫html測試用例

// html-test.js  const glob = require('glob-all')  describe('checking generated in html file',() => {      it('should generate html file',done => {          const files = glob.sync([              './dist/index.html',              './dist/search.html'          ])          if(files.length >0){              done()          }else{              throw new Error('no html files')          }      } )  })

編寫css js測試用例

const glob = require('glob-all')  describe('checking generated in css js file',() => {      it('should generate css js file',done => {          const files = glob.sync([              './dist/index_*.js',              './dist/index_*.css',              './dist/search_*.js',              './dist/search_*.css'          ])          if(files.length >0){              done()          }else{              throw new Error('no css js files')          }      } )  })

在index.js中引入

// index.js  const path = require('path');  const webpack = require('webpack')  const rimraf = require('rimraf');  const Mocha = require('mocha');  const mocha = new Mocha({      timeout: '1000ms',  })  process.chdir(path.join(__dirname,'template')) // 進入template  // 刪除dist  rimraf('./dist',() => {      const prodConfig = require('../../lib/webpack.prod.js')      webpack(prodConfig,(err,stats) => {          if(err){              console.error(err)              process.exit(2)          }          console.log(stats.toString({              colors:true,              modules:true,              children:false,                          }))          console.log('webpack build success,begin run')          mocha.addFile(path.join(__dirname,'html-test.js'))          mocha.addFile(path.join(__dirname,'css-js-test.js'))          mocha.run()      })  })

執行 node test/smoke/index.js可以看到測試正常

單元測試與測試覆蓋率常見測試框架

以mocha和chai為例

單元測試接入

建立src/index.js 和 src/unit/webpack-base-test.js

安裝assert

npm i assert -D

寫測試用例

// webpack-base-test.js    const assert = require('assert');    describe('webpack.base.js test case',() => {        const baseConfig = require('../../lib/webpack.base.js')        console.log('baseConfig',baseConfig)        it('entry',()=>{            assert.equal(baseConfig.entry.index,'/Users/liangchaofei/Desktop/learn/webpack/webpack_learn/10_demo/build-webpack/test/smoke/template/src/index/index.js')        })    })

引入測試用例

// index.js    const path = require('path')    process.chdir(path.join(__dirname,'smoke/template'))    describe('build webpack test case',() => {        require('./unit/webpack-base-test.js');    })

增加test scripts

"test": "./node_modules/.bin/_mocha"

npm run test即可

測試覆蓋率安裝istanbul

npm i istanbul -D

修改test scripts

"test": "istanbul cover ./node_modules/.bin/_mocha"

持續整合優點：快速發現錯誤防止分支大幅偏離主幹核心措施程式碼整合到主幹之前，必須透過自動化測試。只要有一個測試用例失敗，就不能整合接入Travis ci

把專案接入travis ci

在github上建立一個專案git pull 到本地在travis ci網站上接入github專案: https://travis-ci.com/建立.travis.yml

language: node_js  sudo: false  cache:      apt: true      directories:          - node_modules  node_js: stable  instal:      - npm install -D      - cd ./test/smoke/template      - npm install -D      - cd ../../../  scripts:      - npm test

使用git提交程式碼，在https://travis-ci.com/ 看下是否成功即可

釋出到npmnpm login 登陸升級版本npm version patch: 升級補丁版本號npm version minor: 升級小版本號npm version major: 升級大版本號npm publish : 釋出git commit規範本地開發階段增加precommit鉤子安裝husky

npm i husky -D

透過commitmsg校驗鉤子資訊

"scripts":{        "commitmsg": "validate-commit-msg",        "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"    },    "devDependencies":{        "validate-commit-msg":"^2.11.1",        "conventional-changelog-cli":"^1.2.0",        "husky":"^0.13.1"    }