摘要：文章介紹如何創(chuàng)建發(fā)布一個(gè)包，包括項(xiàng)目搭建發(fā)布流程注意事項(xiàng)等。語(yǔ)義化版本號(hào)分為三位。主版本號(hào)當(dāng)進(jìn)行了大都改動(dòng)或者對(duì)有很多不兼容修改時(shí)應(yīng)該進(jìn)行版本號(hào)升級(jí)。次版本號(hào)增加了部分特性或者優(yōu)化時(shí)升級(jí)該版本。如如果你想撤回指定版本，執(zhí)行包名版本號(hào)。

首先在創(chuàng)建好的項(xiàng)目文件夾下面執(zhí)行

npm init

根據(jù)對(duì)應(yīng)提示完成package.json文件初始化。

package name 為你創(chuàng)建的npm包的名稱，在發(fā)布后被安裝使用即該名字，npm規(guī)定包名首字母需要為小寫。如import App from "your-module";

version 即為包版本，每次發(fā)布前都需要更新包版本，否則會(huì)失敗，包版本應(yīng)該遵守語(yǔ)義化規(guī)范。語(yǔ)義化版本號(hào)分為三位0.0.0。主版本號(hào)：當(dāng)進(jìn)行了大都改動(dòng)或者對(duì)api有很多不兼容修改時(shí)應(yīng)該進(jìn)行版本號(hào)升級(jí)。次版本號(hào)：增加了部分特性或者優(yōu)化時(shí)升級(jí)該版本。修訂號(hào)：當(dāng)修改了項(xiàng)目bug或者小的改動(dòng)時(shí)升級(jí)該版本。

entry point 項(xiàng)目的入口路徑，當(dāng)用戶使用包的時(shí)候，會(huì)根據(jù)該入口也就是package.json的main中的路徑來(lái)進(jìn)行索引

git repository 關(guān)聯(lián)的git倉(cāng)庫(kù)

keywords 會(huì)在npm中展示你的項(xiàng)目關(guān)鍵字

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)$/,  //對(duì)圖片文件，使用 url-loader里的加載器處理
        loader: "url-loader",
        options: {
          limit: 8192,   //限制圖片文件字節(jié)，大于8KB則不生成base64 用路徑引用替代（相當(dāng)于file－loader）
          name: "[name].[ext]?[hash]" //文件名
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      template: "./index.html",
    }),
    new webpack.HotModuleReplacementPlugin(), // 熱更新插件
  ],
  devtool: "inline-source-map", // map文件追蹤錯(cuò)誤提示
  devServer: {                  // 啟動(dòng)本地開發(fā)的node服務(wù)器環(huán)境（webpack-dev-server）
    port: 8080,                 // 端口
    contentBase: "./dist",      // 開發(fā)環(huán)境的服務(wù)目錄
    historyApiFallback: true,
    host: "0.0.0.0",
    inline: true,
    hot: true,
  },
};

在開發(fā)環(huán)境中就是一些很常見的配置，保證我們可以進(jìn)行本地的組件模塊開發(fā)即可。

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" //打包時(shí)候排除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;

打包模塊與我們寫應(yīng)用邏輯代碼有些不同，由于大部分用戶使用模塊都不會(huì)去再對(duì)模塊進(jìn)行es5轉(zhuǎn)換，所有我們發(fā)布的模塊也應(yīng)該是已經(jīng)被轉(zhuǎn)換之后的代碼，而且需要提供模塊的引用入口以及排除模塊自己以外的代碼。

entry 在完成模塊打包時(shí)，修改了項(xiàng)目的入口路徑entry。配置打包的entry路徑為該發(fā)布模塊的文件，而不是開發(fā)環(huán)境中的項(xiàng)目入口。

output path為生成的目錄位置以及目錄名，filename 為打包后的模塊文件。libraryTarget 為生成模塊的引入方式，因?yàn)槲覀儗懙膔eact組件基本為模塊化打包開發(fā)方式，選擇使用commonjs2配置，最后打包會(huì)生成符合commonjs規(guī)范的模塊，具體配置規(guī)則可見output.libraryTarget

externals 因?yàn)槲覀兪腔趓eact的組件，但是在完成打包的時(shí)候如果將react也打包進(jìn)去，庫(kù)的體積就會(huì)變大，而且react庫(kù)通常會(huì)在使用組件的時(shí)候被外部引入，所以我們要排除react。externals 配置

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

mode 在webpack4中設(shè)置mode為production，會(huì)自己?jiǎn)⒂蒙a(chǎn)環(huán)境的部分配置優(yōu)化，此時(shí)UglifyJsPlugin壓縮插件也會(huì)啟用，幫助完成我們的library的代碼壓縮。

1.發(fā)布前需要正確配置package.json中的main內(nèi)容，使用時(shí)會(huì)根據(jù)該內(nèi)容自動(dòng)索引模塊內(nèi)容

  "main": "lib/chat-react.js"

2.在發(fā)布前我們需要完成打包，為了確保我們發(fā)布的版本為編譯完成后的版本，可以利用npm scripts中的prepublishOnly鉤子。這個(gè)鉤子可以保證我們?cè)趫?zhí)行npm publish的前進(jìn)行打包操作。

  "scripts": {
    "prepublishOnly": "NODE_ENV="publish" npm run build"
  }

prepublish鉤子也會(huì)在執(zhí)行npm publish前觸發(fā)該周期，我使用的是npm v5.5版本，在使用npm install的時(shí)候prepublish周期也會(huì)被觸發(fā)，翻到了一篇阮老師的文章，其中提到npm5版本時(shí)候會(huì)改掉這一狀態(tài)，prepublish將只在npm publish命令之前運(yùn)行，不過(guò)看起來(lái)跟預(yù)期不一致。在15年的npm官方討論issue里說(shuō)將來(lái)可能會(huì)廢棄prepublish或者prepublishOnly某一個(gè)，不過(guò)翻看了官方npm script文檔對(duì)兩個(gè)鉤子的用法都有說(shuō)明，看起來(lái)是都保留了。

3.配置.npmignore，.npmignore的用法與.gitignore一致。因?yàn)槲覀冊(cè)趫?zhí)行npm publish發(fā)布命令時(shí)會(huì)將項(xiàng)目下掉所有文件都發(fā)布至npm，.npmignore可以忽略掉我們不需要發(fā)布都文件

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

4.編寫使用文檔(readme)。為我們的模塊組件編寫使用文檔是必不可少的，README.md使用的是markdown語(yǔ)法，記不住語(yǔ)法的小伙伴也可以使用我的在線markdown編輯器。

首先注冊(cè)你的npm帳號(hào)

命令行執(zhí)行npm login登錄你的npm賬號(hào)

進(jìn)入你項(xiàng)目目錄下npm publish即可完成發(fā)布

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

npm unpublish chat-react

如果你想撤回指定版本，執(zhí)行npm unpublish + 包名@版本號(hào)。如：

npm unpublish [email protected]

Tips：npm為了保證包不會(huì)影響到使用者，發(fā)布的版本只能在24小時(shí)內(nèi)進(jìn)行撤回。

文章代碼演示GitHub地址