1.npm
首先在自定义的目录下打开终端执行 npm init ；
根据对应的步骤生成相应的package.json 文件 。
2.Eslint (代码检查工具)
- 安装eslint：npm install eslint --save-dev 或者全局安装 npm install eslint --global
- 执行eslint的初始化：eslint --init 根据相应步骤同样会生成一个 .eslintrc.js 文件
- 编辑器自行设置eslint插件，开启eslint检查。
3.Jest （单元测试）
安装jest：npm install --save-dev jest
安装完成后同时在package.json文件增加 test 命令
"scripts": {
"test": "jest"
}
4.项目目录
在当前目录下增加 src、test目录，同时增加两个测试文件：
src/sum.js
const sum = (a, b) => {
return a + b
}
export { sum }
test/sum.test.js (jest测试样例文件都是以.test.js结尾)
import { sum } from '../src/sum'
test('1 + 2 = 3', () => {
expect(sum(1, 2)).toBe(3)
})
代码中test、expect等jest的内置的变量暂时还不能被eslint识别，需在 .eslintrc.js 中加入
env: {
jest: true
}
此时运行 npm run test 还是会报错的，目前ES6的代码还不能识别。
6.Babel （下一代 JavaScript 语法的编译器）
安装babel环境：npm install @babel/preset-env --save-dev
同时安装babel与jest协同的插件：npm install --save-dev babel-jest
在根目录下增加 .babelrc 文件，加入：
{
"presets": ["@babel/preset-env"]
}
同时在package.json文件中加入：
{
"scripts": {
"test": "jest"
},
"jest": {
"transform": {
"^.+\\.jsx?$": "babel-jest"
}
}
}
现在运行 npm run test ，就可以看到通过测试样例：
目前为止，基本可以满足基于代码风格检查、ES6代码、单元测试为一体的JS代码库的代码开发了。接下来引入模块打包器，把ES6模块化的代码打包成一个对应的JS库。
7.Rollup.js （模块打包器）
首先安装rollup.js：npm install rollup --global
同时增加babel插件(打包的代码进行babel转换)：npm install --save-dev rollup-plugin-babel
接着增加rollup的配置文件：rollup.config.js
const babel = require('rollup-plugin-babel')
export default {
input: 'src/sum.js',
output: {
file: './dist/sum.umd.js',
format: 'umd',
name: 'Calculate' // format为iife/umd 包，同一页上的其他的脚本可以访问（全局变量名）
},
plugins: [babel({
exclude: 'node_modules/**' // 只编译我们的源代码
})]
}
同时在package.json增加 build 命令：
"scripts": {
"test": "jest",
"build": "rollup -c" // -c 使用配置文件rollup.config.js
}
最后执行 npm run build 会在根目录下生成打包后的dist/sum.umd.js，直接在根目录下创建一个index.html
<html>
<head>
<script src="./dist/sum.umd.js"></script>
<script>
console.log('1 + 1 = ', Calculate.sum(1, 1))
</script>
</head>
</html>
在浏览器中打开index.html，打开控制台就可以看到最终结果：
