如何發佈你本身的React模塊至NPM

文章介紹如何建立發佈一個npm包，包括項目搭建、發佈流程、注意事項等。 文章演示代碼GitHub地址

1. 初始化項目

首先在建立好的項目文件夾下面執行

npm init
複製代碼

根據對應提示完成package.json文件初始化。

• package name 爲你建立的npm包的名稱，在發佈後被安裝使用即該名字，npm規定包名首字母須要爲小寫。如import App from 'your-module';
• version 即爲包版本，每次發佈前都須要更新包版本，不然會失敗，包版本應該遵照語義化規範。語義化版本號分爲三位0.0.0。主版本號：當進行了大都改動或者對api有不少不兼容修改時應該進行版本號升級。次版本號：增長了部分特性或者優化時升級該版本。修訂號：當修改了項目bug或者小的改動時升級該版本。
• entry point 項目的入口路徑，當用戶使用包的時候，會根據該入口也就是package.json的main中的路徑來進行索引
• git repository 關聯的git倉庫
• keywords 會在npm中展現你的項目關鍵字

2. 項目構建

開發環境webpack.config.js配置

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'app.js'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {test: /\.css$/, loader: 'style-loader!css-loader'},
      {
        test: /\.(png|jpg|gif|svg)$/,  //對圖片文件，使用 url-loader裏的加載器處理
        loader: 'url-loader',
        options: {
          limit: 8192,   //限制圖片文件字節，大於8KB則不生成base64 用路徑引用替代（至關於file－loader）
          name: '[name].[ext]?[hash]' //文件名
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      template: './index.html',
    }),
    new webpack.HotModuleReplacementPlugin(), // 熱更新插件
  ],
  devtool: 'inline-source-map', // map文件追蹤錯誤提示
  devServer: {                  // 啓動本地開發的node服務器環境（webpack-dev-server）
    port: 8080,                 // 端口
    contentBase: './dist',      // 開發環境的服務目錄
    historyApiFallback: true,
    host: '0.0.0.0',
    inline: true,
    hot: true,
  },
};

複製代碼

在開發環境中就是一些很常見的配置，保證咱們能夠進行本地的組件模塊開發便可。

打包模塊webpack.prd.js配置

const path = require('path');
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const NODE_ENV = process.env.NODE_ENV;
const prdWebpackConfig= {
  mode: 'production',
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    path: path.join(__dirname, 'lib'),
    filename: "chat-react.js",
    libraryTarget: 'commonjs2'  //模塊輸出方式
  },
  externals: {
    react: 'react' //打包時候排除react
  },
  module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {test: /\.css$/, loader: 'style-loader!css-loader'},
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 8192,
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  plugins: []
};

if (NODE_ENV !== 'publish') {
  prdWebpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = prdWebpackConfig;

複製代碼

打包模塊與咱們寫應用邏輯代碼有些不一樣，因爲大部分用戶使用模塊都不會去再對模塊進行es5轉換，全部咱們發佈的模塊也應該是已經被轉換以後的代碼，並且須要提供模塊的引用入口以及排除模塊本身之外的代碼。

1. entry 在完成模塊打包時，修改了項目的入口路徑entry。配置打包的entry路徑爲該發佈模塊的文件，而不是開發環境中的項目入口。
2. output path爲生成的目錄位置以及目錄名，filename 爲打包後的模塊文件。libraryTarget 爲生成模塊的引入方式，由於咱們寫的react組件基本爲模塊化打包開發方式，選擇使用commonjs2配置，最後打包會生成符合commonjs規範的模塊，具體配置規則可見output.libraryTarget
3. externals 由於咱們是基於react的組件，可是在完成打包的時候若是將react也打包進去，庫的體積就會變大，並且react庫一般會在使用組件的時候被外部引入，因此咱們要排除react。externals 配置
4. BundleAnalyzerPlugin 在非發佈命令下打包時候，咱們能夠用該插件審查一下打包完成的包體積大小。因此只需判斷下在npm scripts中設置的NODE_ENV環境變量，按需使用該插件便可。
5. mode 在webpack4中設置mode爲production，會本身啓用生產環境的部分配置優化，此時UglifyJsPlugin壓縮插件也會啓用，幫助完成咱們的library的代碼壓縮。

3. 發佈前配置

1.發佈前須要正確配置package.json中的main內容，使用時會根據該內容自動索引模塊內容

"main": "lib/chat-react.js"
複製代碼

2.在發佈前咱們須要完成打包，爲了確保咱們發佈的版本爲編譯完成後的版本，能夠利用npm scripts中的prepublishOnly鉤子。這個鉤子能夠保證咱們在執行npm publish的前進行打包操做。

"scripts": {
    "prepublishOnly": "NODE_ENV='publish' npm run build"
  }
複製代碼

prepublish鉤子也會在執行npm publish前觸發該週期，我使用的是npm v5.5版本，在使用npm install的時候prepublish週期也會被觸發，翻到了一篇阮老師的文章，其中提到npm5版本時候會改掉這一狀態，prepublish將只在npm publish命令以前運行，不過看起來跟預期不一致。在15年的npm官方討論issue裏說未來可能會廢棄prepublish或者prepublishOnly某一個，不過翻看了官方npm script文檔對兩個鉤子的用法都有說明，看起來是都保留了。

3.配置.npmignore，.npmignore的用法與.gitignore一致。由於咱們在執行npm publish發佈命令時會將項目下掉全部文件都發布至npm，.npmignore能夠忽略掉咱們不須要發佈都文件

node_modules
example
src
.babelrc
app.js
index.html
package-lock.json
webpack.config.js
webpack.prd.js
複製代碼

4.編寫使用文檔(readme)。爲咱們的模塊組件編寫使用文檔是必不可少的，README.md使用的是markdown語法，記不住語法的小夥伴也可使用個人在線markdown編輯器。

4. 完成發佈

發佈流程

1. 首先註冊你的npm賬號
2. 命令行執行npm login登陸你的npm帳號
3. 進入你項目目錄下npm publish便可完成發佈

回撤版本

若是你意外的發佈錯了包，使用npm unpublish +包名便可刪除該包。如：

npm unpublish chat-react
複製代碼

若是你想撤回指定版本，執行npm unpublish + 包名@版本號。如：

npm unpublish chat-react@1.0.0
複製代碼

Tips：npm爲了保證包不會影響到使用者，發佈的版本只能在24小時內進行撤回。

文章代碼演示GitHub地址