开发久了，你会发现在很多项目中，部分函数是通用的。大部分小伙伴的做法是从一个项目拷贝到另一个项目。有时会忘记某个函数是写在那个项目当中。此时，不如将平时常用的函数整理，发布一个自己的npm包。废话不多说：接下来，让我一步步搭建属于自己的npm包。
1、新建一个空白文件夹，执行如下命令
npm init -y
// 常用配置说明如下
npm 常用配置说明 name - 包名。
version - 包的版本号
scripts - 配置可被 npm 执行的命令
config - 设置配置属性，配合 scripts 属性使用
dependencies - 包依赖，会同该包一起安装
devDependencies - 包依赖，不会同该包一起安装
peerDependencies - 声明使用该插件时，宿主环境必需存在的插件
engines - 指定代码运行环境
os - 指定代码运行的操作系统
publishConfig - 发布时的配置
main - 其他项目引用该包时的入口文件
description - 包描述，可用于 npm 官网搜索
keywords - 包关键字，可用于 npm 官网搜索
homepage - 包的官网
urlbugs - 提交包 bug 的方式
license - 包许可证
author - 包作者，只能存在一个作者
contributors - 包的其他贡献者姓名
2、创建如下目录结构（后面说明具体作用）
// 后面具体说明每个文件的用处
.
├── README.md
├── babel.config.js
├── dist
│ └── lzytool.min.js
├── npm-publish.sh
├── package.json
├── src
│ ├── add.js
│ └── index.js
├── test
│ └── add.test.js
├── .mocharc.js
├── .npmignore
└── webpack.config.js
3、安装依赖包
// 用于babel配置
npm install @babel/cli @babel/core @babel/preset-env @babel/polyfill -D
// 用于单元测试
npm install @babel/register babel-plugin-transform-object-rest-spread chai mocha -D
// 用于webpack打包
npm install webpack webpack-cli babel-loader -D
4、配置bable
// 编辑 /babel.config.js 文件
// 传送门：https://www.babeljs.cn/docs
module.exports = {
"presets": [
["@babel/preset-env", {
"targets": {
"ie": "8",
"chrome": "58",
},
}]
],
"plugins": [
["transform-object-rest-spread", { "useBuiltIns": true }]
]
}
5、配置 webpack
const path = require("path");
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
// 设置mode为none避免默认压缩
mode: 'none',
// lzytool.min 为压缩文件，用于生产环境
entry: {
'lzytool': path.join(__dirname, "src/index.js"),
'lzytool.min': path.join(__dirname, "src/index.js"),
},
// library相关文档
// 传送门：https://www.webpackjs.com/configuration/output/#output-library
output: {
path: path.join(__dirname, "dist"),
filename: '[name].js',
library: 'webpackNumbers',
libraryTarget: 'umd',
globalObject: 'this',
},
// 配置 bable 模块，用于ES6以上语法转ES5
// 传送门：https://webpack.js.org/loaders/babel-loader/#root
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
// 创建 TerserPlugin 实例，覆盖默认的压缩配置。
// 传送门：https://webpack.js.org/plugins/terser-webpack-plugin/
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
include: /\.min\.js$/
})
]
}
}
6、编写一个的函数
// 编辑 /src/add.js
function add(x, y) {
return x + y;
}
export default add;
// 编辑 /src/index.js 将 add 函数导出
export { default as add } from './add'
7、配置 package.json
// 主要配置 scripts
{
"name": "zytool",
"version": "1.0.0",
"description": "整理常用的JS函数库",
"main": "./dist/lzytool.min.js",
"scripts": {
"build": "webpack", // 用于打包
"test": "mocha --require @babel/register" //用于单元测试
},
"author": "ZhouYi",
"license": "MIT",
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.6",
"@babel/polyfill": "^7.8.7",
"@babel/preset-env": "^7.9.6",
"@babel/register": "^7.9.0",
"babel-loader": "^8.1.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"chai": "^4.2.0",
"mocha": "^7.1.2",
"terser-webpack-plugin": "^3.0.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
}
// 执行打包命令
npm run build
// 得到如下结果
Hash: f10c45e2a9f76ae0b16f
Version: webpack 4.43.0
Time: 1100ms
Built at: 2020-05-13 16:35:02
Asset Size Chunks Chunk Names
lzytool.min.js 1.29 KiB 0 [emitted] lzytool.min
Entrypoint lzytool.min = lzytool.min.js
[0] ./src/index.js 39 bytes {0} [built]
[1] ./src/add.js 59 bytes {0} [built]
8、配置 .mocharc.js
// 用于单元测试
module.exports = {
diff: true,
extension: ['js'],
package: './package.json',
reporter: 'spec',
};
9、配置 .npmignore
// 用于npm发包
.DS_Store
.mocharc.js
node_modules
npm-debug.log*
yarn-debug.log*
yarn-error.log*
babel.config.js
webpack.config.js
npm-publish.sh
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
10、单元测试
// 编辑 /test/add.text.js
import chai from 'chai';
import { add } from '../dist/lzytool.min';
let expect = chai.expect;
describe('加法函数的测试', function () {
it('1 加 1 应该等于 2', function () {
expect(add(1, 1)).to.be.equal(2);
});
});
// 执行 npm run test
// 得到如下结果
加法函数的测试
✓ 1 加 1 应该等于 2
1 passing (3ms)
11、注册NPM账号
12、登录 npm 、发布包
npm login
// 输入你刚注册的用户名和密码
npm publish
// 发包
以上只是发布一个简单的JS函数包到NPM的过程。
相关配置说明可以通过传送门查看文档哈。
