你還沒有擼一個包扔到npm上？

codexu發表於2019-02-16
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/

相關文章