摘要：文章介紹如何創建發布一個包，包括項目搭建發布流程注意事項等。語義化版本號分為三位。主版本號當進行了大都改動或者對有很多不兼容修改時應該進行版本號升級。次版本號增加了部分特性或者優化時升級該版本。如如果你想撤回指定版本，執行包名版本號。

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

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中展示你的項目關鍵字

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,
  },
};

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

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轉換，所有我們發布的模塊也應該是已經被轉換之后的代碼，而且需要提供模塊的引用入口以及排除模塊自己以外的代碼。

entry 在完成模塊打包時，修改了項目的入口路徑entry。配置打包的entry路徑為該發布模塊的文件，而不是開發環境中的項目入口。

output path為生成的目錄位置以及目錄名，filename 為打包后的模塊文件。libraryTarget 為生成模塊的引入方式，因為我們寫的react組件基本為模塊化打包開發方式，選擇使用commonjs2配置，最后打包會生成符合commonjs規范的模塊，具體配置規則可見output.libraryTarget

externals 因為我們是基于react的組件，但是在完成打包的時候如果將react也打包進去，庫的體積就會變大，而且react庫通常會在使用組件的時候被外部引入，所以我們要排除react。externals 配置

BundleAnalyzerPlugin 在非發布命令下打包時候，我們可以用該插件審查一下打包完成的包體積大小。所以只需判斷下在npm scripts中設置的NODE_ENV環境變量，按需使用該插件即可。

mode 在webpack4中設置mode為production，會自己啟用生產環境的部分配置優化，此時UglifyJsPlugin壓縮插件也會啟用，幫助完成我們的library的代碼壓縮。

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編輯器。

首先注冊你的npm帳號

命令行執行npm login登錄你的npm賬號

進入你項目目錄下npm publish即可完成發布

如果你意外的發布錯了包，使用npm unpublish +包名即可刪除該包。如：

npm unpublish chat-react

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

npm unpublish chat-react@1.0.0

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

文章代碼演示GitHub地址