不抓个包扔上去，以后给你起名会不会有问题？这次帮助没有上传过npm包的同学了解流程，写一个简单的背景音乐控制插件。开发流程使用npm初始化项目创建__mocks__文件夹用于测试插件安装开发依赖（rollup,babel,eslint）使用ES6编写插件核心代码使用rollup&babel打包编译（UMD）发布到npm使用npm初始化项目创建一个文件夹x-music，这个名字是我用的，你可以换成别的~然后使用npminit命令在根目录下创建一个package.json文件。$npminitpackage.json有两个很重要的点name：你的包的名字，因为现在重名很多，npm已经推荐使用@codexu/**这种形式，codexu是我的npm账号名，你可以看vue,babel等都开始使用这种方式。version：每次发布到npm都会检测版本号，这次提交必须大于上次提交的版本号。创建用于测试插件的__mocks__文件夹。没有人能一次写出正确的代码，对吧？在__mocks__中创建测试环境，用于插件测试和调试。这里我使用我自己的脚手架工具x-build，当然你也可以使用你习惯的脚手架或者手动滚几个文件和文件夹来测试你的插件。如果要使用x-build，请使用如下命令安装（不用的请跳过本段）：$npminstall-gx-build-cli$x-buildcreate__mocks__-qq参数就是无需定制即可快速生成模板。安装开发依赖使用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.npmignorerollup.config.js.eslintrc.jselint里面有很多配置，这里我用我比较习惯的方式.eslintrc.js，里面有中文注释，没有的朋友用过eslint的不多可以进来看看。.babelrc这是官方rollup文档推荐的配置：{"presets":[["latest",{"es2015":{"modules":false}}]],"plugins":["external-helpers"]}.npmignore文件可以阻止你不想要的npm文件或文件夹，所以请随意使用它。.DS_Store.git__mocks__node_modulesrollup.config.jsimport从'rollup-plugin-node-resolve'解析；从'rollup-plugin-babel'导入babel；从'rollup-plugin-uglify'导入uglify；从'uglify-导入{minify}es';exportdefault{输入：'./index.js'，输出：[{文件：`./dist/x-music.min.js`，名称：`XMusic`，格式：'umd'}，{文件：`./dist/x-music.es.min.js`，格式：'es'}]，插件：[resolve(),babel({exclude:'node_modules/**'}),uglify({},缩小)]};顺便修改一下package.json"scripts":{"build":"rollup-c"}，这样就可以使用npmrunbuild打包了。使用ES6编写插件的核心代码不是本文的核心。如果您想查看代码，可以在此处查看。发布到npm如果你没有npm账号，请先注册，然后在终端输入命令：$npmlogin输入你的账号邮箱和密码，然后通过命令：$npmpublish就会上传到npm.如果你想让别人使用你的插件，最好在README.md中写一个使用文档。最后说一下我自己的项目【X-BUILD】。希望大家能给我点几颗珍贵的星星，让我的简历看起来更好~Github:https://github.com/codexu/X-BUILD文档:https://codexu.github.io/
