基於Webpack和ES6構建NPM包

用ES6編寫代碼，使用Webpack打包導出模塊，併發布到NPM社區，添加基於Travis-CI和Coveralls的持續集成到Github項目中

特性

1. 基於Webpack 4
2. 使用ES6編寫源碼
3. 模塊支持:
   • 在瀏覽器環境下使用，經過<script>標籤來引入這個類庫
   • 經過NPM安裝使用
   • 兼容 ES6(ES2015) 的模塊系統、CommonJS 和 AMD 模塊規範
4. 使用 AVA 自動化測試，並經過 nyc 測試代碼覆蓋率
5. 持續集成（Travis-CI + Coveralls)
6. 使用 ESLint + Standrad 檢測代碼質量

項目初始化

1. 建立repository並clone到本地

$ git clone https://github.com/eteplus/typeof
複製代碼

2. 添加.editorconfig

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.yml]
indent_style = space
indent_size = 2
複製代碼

3. 建立目錄

+-- src 源碼目錄
|   +-- typeof.js
|   +-- types.js
+-- test 測試用例
|   +--- test.js
+-- dist 輸出目錄
.
.
複製代碼

4. 建立package.json

使用NPM做用域管理髮布模塊，避免同名模塊，通常使用用戶名來註冊私有模塊(@eteplus/<package name>)

$ npm init --scope=eteplus
複製代碼

package name: (@eteplus/typeof)
version: (1.0.0) 0.1.0
description: The typeOf method returns a string indicating the type of the value
entry point: (index.js) dist/typeof.js
test command:
git repository: https://github.com/eteplus/typeof.git
keywords: node,javascript,typeof
author: eteplus
license: (ISC) MIT
About to write to /Users/eteplus/Workspace/Node/study/typeof/package.json:

{
  "name": "@eteplus/typeof",
  "version": "0.1.0",
  "description": "The typeOf method returns a string indicating the type of the value",
  "main": "dist/typeof.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/eteplus/typeof.git"
  },
  "keywords": [
    "node",
    "javascript",
    "typeof"
  ],
  "author": "eteplus",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/eteplus/typeof/issues"
  },
  "homepage": "https://github.com/eteplus/typeof#readme"
}
複製代碼

5. ESLint 初始化

自動生成.eslintrc.js文件並安裝相關依賴（可根據本身喜愛選擇代碼規範）

1. 安裝ESlint

# or use yarn
$ npm install eslint -D
複製代碼

$ npm install eslint -g # 全局安裝ESLint
$ eslint --init

? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Standard
? What format do you want your config file to be in? JavaScript
複製代碼

2. 添加.eslintignore文件忽略對輸出目錄的代碼檢測

dist/
複製代碼

6. 建立webpack和babel的配置文件

1. 安裝相關依賴：

$ npm install webpack webpack-cli uglifyjs-webpack-plugin -D
$ npm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-env -D
$ npm install eslint-loader eslint-friendly-formatter -D
複製代碼

2. 建立 webpack.config.js：

webpack output 配置項說明 webpack.js.org/configurati…

'use strict'

const path = require('path')
const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const resolve = dir => path.join(__dirname, '.', dir)

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  entry: {
    typeof: './src/typeof.js'
  },
  output: {
    path: resolve('dist'), // 輸出目錄
    filename: '[name].js', // 輸出文件
    libraryTarget: 'umd', // 採用通用模塊定義
    library: 'typeOf', // 庫名稱
    libraryExport: 'default', // 兼容 ES6(ES2015) 的模塊系統、CommonJS 和 AMD 模塊規範
    globalObject: 'this' // 兼容node和瀏覽器運行，避免window is not undefined狀況
  },
  devtool: '#source-map',
  module: {
    rules: [
      {
        test: /\.(js)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /(node_modules)/
      }
    ]
  },
  plugins: isProd
    ? [
      new UglifyJsPlugin({
        parallel: true,
        uglifyOptions: {
          compress: {
            warnings: false
          },
          mangle: true
        },
        sourceMap: true
      })
    ]
    : [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    ]
}
複製代碼

3. 建立 .babelrc：

heplers和polyfill根據實際狀況開啓/關閉，具體配置參考（babel-plugin-transform-runtime）

{
  "presets": ["env"],
  "plugins": [
    ["transform-runtime", {
      "helpers": false,
      "polyfill": false
      }
    ]
  ]
}
複製代碼

7. 添加npm命令

在package.json上添加npm命令，經過npm run [name] 執行任務

{
  "scripts": {
    "dev": "NODE_ENV=development webpack --config webpack.config.js --mode=development -w",
    "build": "NODE_ENV=production webpack --config webpack.config.js --mode=production",
    "lint": "eslint ."
  }
}
複製代碼

測試與代碼覆蓋率

使用 AVA + nyc 自動化測試和測試代碼覆蓋率

1. 安裝AVA 和 nyc

$ npm install ava nyc -D
複製代碼

2. 添加ava和nyc配置到package.json

AVA:

• files：須要測試的用例文件
• verbose：開啓詳細輸出
• babel：測試文件的babel配置，'inherit'使用根目錄下的.babelrc
• require：運行測試前須要額外的模塊

其餘配置項：

• 官方文檔

nyc：

• 官方文檔

{
  "ava": {
    "files": [
      "test/test.js"
    ],
    "verbose": true,
    "babel": "inherit",
    "require": [
      "babel-core/register"
    ]
  },
  "nyc": {
    "exclude": [
      "test/*.js"
    ]
  }
}
複製代碼

3. 添加npm命令

{
  "scripts": {
    ...
    "test": "npm run lint && nyc ava",
    "test:watch": "ava --watch"
  }
}
複製代碼

持續集成Travis CI

1. 登錄Travis-CI

travis-ci.org，使用Github受權登錄

2. 添加Repo

3. 建立.travis.yml

在項目根目錄下添加.travis.yml

說明：

• language 指定開發語言
• node_js 指定node.js版本號

其它配置項:

• 官方參考文檔

language: node_js
node_js:
- '9'
- '8'
- '7'
複製代碼

4. 提交.travis.yml

提交.travis.yml到Github, Travis-CI根據提交自動觸發持續集成，可在設置中取消根據提交自動觸發持續集成

5. 獲取徽章

獲取持續集成結果徽章添加到README.md中

測試覆蓋率Coveralls

1. 登錄Coveralls

coveralls.io，使用Github受權登錄

2. 添加Repo

3. 加密repo_token

安全起見，repo_token不該該明文寫到.travis.yml中，coveralls提供了非對稱加密repo_token的方法

• 使用travis命令工具加密

# 更改成國內的安裝源
$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
$ gem sources -l
複製代碼

# 安裝travis
$ sudo gem install travis -v 1.8.8 --no-rdoc --no-ri
$ travis version
1.8.8
複製代碼

# 加密
travis encrypt COVERALLS_REPO_TOKEN=your_repo_token
複製代碼

• 添加加密後的secure到.travis.yml

修改.travis.yml，設置env環境變量（travis提供的repo_token安全方式之一），也可使用 --add 自動添加到 .travis.yml中。

4. 安裝coveralls並添加npm命令

• 安裝coveralls

$ npm install coveralls -D
複製代碼

• 添加npm命令

nyc生成覆蓋率報告推送給coveralls

{
  "scripts": {
    ...
    "coverage": "nyc report --reporter=text-lcov | coveralls"
  }
}
複製代碼

5. 修改.travis.yml

• 添加 after_success: npm run coverage

after_success: script階段成功時執行， script階段默認腳本爲 npm test，能夠省略

• 從新提交到Github，觸發持續集成，到coveralls.io查看覆蓋率報告，並獲取徽章添加到README.md

發佈模塊到NPM社區

1. 打包代碼

$ npm run build
複製代碼

2. 添加帳號

須要先到www.npmjs.com註冊一個帳號

$ npm adduser
Username: your username
Password: your password
Email: your email
複製代碼

3. 發佈

無做用域包始終是公開的。有做用域默認爲受限制的，可使用–-access public 發佈的時候設置權限爲公開

$ npm publish --access public
複製代碼

npm社區版本號規則採用的是semver(語義化版本)，主要規則以下：

版本格式：主版號.次版號.修訂號

版號遞增規則以下：

• 主版號：當你作了不相容的 API 修改，
• 次版號：當你作了向下相容的功能性新增，
• 修訂號：當你作了向下相容的問題修正。
• 先行版號及版本編譯資訊能夠加到「主版號.次版號.修訂號」的後面，做爲延伸

添加個性化徽章

推薦 shields.io/

爲項目添加上各類各樣的徽章，例如：

• 測試是否經過以及代碼覆蓋率狀況
• 項目的最新版本
• 項目的被使用狀況
• 代碼風格
• 項目的開源協議

示例項目

該項目包含教程全部的完整配置

Github地址: github.com/eteplus/typ…

相關連接

• Webpack
• AVA
• nyc
• Travis-CI
• Coveralls
• 持續集成服務 Travis CI 教程