你还没有撸一个包扔到npm上？

24次阅读

共计 2101 个字符，预计需要花费 6 分钟才能阅读完成。

再不撸个包扔上去，以后起名字都是问题????。
这次帮助没有上传过 npm 包的同学了解一下流程，写一个简单的背景音乐控制插件。
开发流程

使用 npm 初始化项目
创建 __mocks__ 文件夹用于测试插件
安装开发依赖 (rollup、babel、eslint)
使用 ES6 编写插件核心代码
使用 rollup & babel 打包编译 (UMD)
发布到 npm

使用 npm 初始化项目
创建文件夹 x-music，这个名字被我用了，你们换个别的吧～然后使用 npm init 指令会创建一个 package.json 文件在根目录下。
$ npm init
package.json 有俩点很重要

name: 你这个包的名字，由于现在重名较多，npm 已经推荐使用 @codexu/** 这种形式，codexu 就是我的 npm 账户名，你可以看到 vue、babel 等等都开始使用这种方式了。
version: 每次向 npm publish 时会检测版本号，本次提交必须大于上次提交的版本号。

创建 __mocks__ 文件夹用于测试插件
谁也不能一次性写对代码是吧，__mocks__ 里创建个测试环境用于插件测试和调试。
这里我使用了我自己的脚手架工具 x-build，当然你也可以用你习惯的脚手架或者手动撸几个文件和文件夹去测试你的插件。
如果你想使用 x-build，请使用以下命令安装（不使用直接跳过这段）：
$ npm install -g x-build-cli
$ x-build create __mocks__ -q
-q 参数是快速生成模板，无需自定义。
安装开发依赖

使用 rollup 作为打包工具，配置比 webpack 简单，而且打包出来的效果很好。
babel 可以让你使用 ES6 语法
eslint 还是很建议使用，毕竟你要写一款开源插件，别人可能会来阅读你的源码，规范点没差。

“devDependencies”: {
“babel-cli”: “^6.26.0”,
“babel-eslint”: “^10.0.1”,
“babel-plugin-external-helpers”: “^6.22.0”,
“babel-preset-env”: “^1.6.0”,
“babel-preset-latest”: “^6.24.1”,
“eslint”: “^5.10.0”,
“rollup-plugin-babel”: “^3.0.2”,
“rollup-plugin-node-resolve”: “^3.0.0”,
“rollup-plugin-uglify”: “^2.0.1”,
“uglify-es”: “^3.1.3”
}
安装最新版本我不能确保你会不会中途报错。
创建文件

.eslintrc.js
.babelrc
.npmignore
rollup.config.js

.eslintrc.js
eslint 配置有很多，这里我使用了我比较习惯的方式 .eslintrc.js，里面有中文注释，没怎么用过 eslint 的小伙伴可以进来看看。
.babelrc
这是 rollup 官方文档推荐的配置：
{
“presets”: [
[“latest”, {
“es2015”: {
“modules”: false
}
}]
],
“plugins”: [“external-helpers”]
}
.npmignore
这个文件可以把你不想到 npm 文件或文件夹屏蔽掉，随意发挥吧。
.DS_Store
.git
__mocks__
node_modules
rollup.config.js
import resolve from ‘rollup-plugin-node-resolve’;
import babel from ‘rollup-plugin-babel’;
import uglify from ‘rollup-plugin-uglify’;
import {minify} from ‘uglify-es’;

export default {
input: ‘./index.js’,
output: [{
file: `./dist/x-music.min.js`,
name: `XMusic`,
format: ‘umd’
},{
file: `./dist/x-music.es.min.js`,
format: ‘es’
}],
plugins: [
resolve(),
babel({
exclude: ‘node_modules/**’
}),
uglify({}, minify)
]
};
顺便修改一下 package.json
“scripts”: {
“build”: “rollup -c”
},
这样使用 npm run build 就可以打包了。
使用 ES6 编写插件核心代码
这块并不是本文的核心，想看代码的可以看这里。
发布到 npm
如果你还没有 npm 账户，请注册，然后在终端里输入指令：
$ npm login
输入你的账户邮件和密码，然后通过指令：
$ npm publish
就会被上传到 npm。
如果你希望别人也使用你的插件，最好在 README.md 中写好使用文档。