你尚未擼一個包扔到npm上？

再不擼個包扔上去，之後起名字都是問題😢。

此次幫助沒有上傳過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 中寫好使用文檔。

---

最後仍是安利一下本身的項目【X-BUILD】，但願你們給幾顆寶貴的star，讓我簡歷好看點～

Github: https://github.com/codexu/

X-BUILD文檔: https://codexu.github.io/