封装一个npm包
一、项目结构
├── .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 文件。
