一、項目結構
├── .babelrc // babel 配置
├── .commitlintrc.js // git commit 配置
├── .eslintrc.js // eslint 配置
├── .gitignore // git 忽略文件
├── .npmignore // npm 忽略文件
├── README.md // 項目介紹
├── dist // 生產目錄
│ └── bundle.js // 打包后的 js 文件
├── package-lock.json
├── package.json // 項目配置
├── src // 源文件目錄
│ ├── index.js // 入口文件
│ └── util.js // 功能函數
└── webpack.config.js // webpack 配置
二、開發
1、新建
mkdir package
cd package
npm init
2、安裝ESlint
（ESLint 是一個 可組裝的 JavaScript 和 JSX 檢查工具，可以用來保證寫出語法正確、風格統一的代碼）
3、配置Commitlint
（commitlint 是一個代碼的提交規范校驗工具，優雅、清晰的提交歷史方便團隊協作和快速定位問題）
（1）安裝 Commitlint 腳手架與 Git Hook 工具
npm install @commitlint/cli @commitlint/config-conventional husky --save-dev
（2）增加 commitlintrc
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > .commitlintrc.js
（3）配置 Git Hooks
//package.json
{
"husky": {
"hooks": {
"pre-commit": "eslint src --fix --ext .js",
"commit-msg": "commitlint -e"
}
}
4、打包
（1）安裝 webpack
npm install webpack webpack-cli --save-dev
（2）增加 webpack.config.js
（組件一般需要提供 <script> 和 npm install 兩種引入方式，所以我們打包時需要選擇 umd 規范。)
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
library: 'package', // 導出變量名
libraryTarget: 'umd', // 所有的模塊定義下都可運行的方式。它將在 CommonJS, AMD 環境下運行，或將模塊導出到 global 下的變 量
} }
（3）配置 npm 命令
//package.json
"scripts": {
"build": "webpack"
}
5、編譯
（在我們開發組件庫的過程中，可能會使用到一些 ES6、ES7 語法或者新的 API，而項目打包時為了加快打包構建速度會忽略到 node_modules 下的文件，所以組件最終應該提供一個編譯好的 ES5 語法文件，這里我們使用 babel 和 babel polyfill 來編譯組件.）
（1）安裝 Babel
npm install @babel/core @babel/preset-env babel-loader @babel/plugin-transform-runtime @babel/runtime-corejs3 --save-dev
（2）增加 .babelrc
{
"presets": [
["@babel/preset-env"]
],
"plugins": [
[
"@babel/plugin-transform-runtime", {
"corejs": 3
}
]
]
}
( 3 ) Webpack 配置 babel-loader
（組件一般需要提供 <script> 和 npm install 兩種引入方式，所以我們打包時需要選擇 umd 規范。）
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
library: 'package',
libraryTarget: 'umd',
},
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
}]
}
}
6、開發
新建一個 src 文件夾，增加 index.js 和 util.js 文件，然后我們運行 npm run build，可以看到 dist 目錄下生成了一個打包后的 js 文件。