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

再不撸个包扔上去，以后起名字都是问题:cry:。

这次帮助没有上传过npm包的同学了解一下流程，写一个简单的背景音乐控制插件。

开发流程

__mocks__

使用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 就可以打包了。