(這篇文章以React為例，其他框架類同古劲。)

預備工作

1. 首先初始化一個React項目掰曾，也可以直接Fork我之前用React初始化的一個Demo桶雀。這個Demo之前也寫過一篇文章介紹辕狰，目的就是讓大家真正理解每一步的由來改备。從0開始利用Webpack搭建React Demo控漠。
2. 在NPM官網(wǎng),注冊個人賬號蔓倍。
3. 給自己的NPM包取一個名字悬钳，并且通過搜索你取的這個名字的方式在NPM官網(wǎng)驗證這個名字是否存在，如果存在需要重新?lián)Q一個獨一無二的名字偶翅。確定名字之后默勾，將package.json文件的name 換成你確定的名字，例如我作為案例的組件名：react-components-calendar 聚谁。

開始開發(fā)

1. 根據(jù)我Demo里面的目錄結(jié)構(gòu)母剥，建議先在components目錄開發(fā)我們的組件，然后在page目錄進行引用形导。

2. 配置webpack.config.js：

     entry: {
       app: ['./src/main.js'],
       component: ['./components/index.js']
     },
     output: {
       path: path.resolve(__dirname, '../build'),
       filename: '[name].js',
       publicPath: "/build/",
       libraryTarget: 'umd',
       library: 'Calendar'
     },
     externals: {
       'react': 'react',
       'react-dom': 'react-dom'
     }
   

   在Demo的基礎上环疼，主要做了三項改進：

   1. 入口entry項新增了component這一項目，用來作為我們開發(fā)的組件的入口朵耕。

   2. 輸出output項filename文件名采用[name]獲取entry的鍵名作為文件名炫隶。libraryTarget為確定你打包后的文件，模塊組織是遵循的什么規(guī)范阎曹，可選項有：

      "var" - Export by setting a variable: var Library = xxx (default)
      "this" - Export by setting a property of this: this["Library"] = xxx
      "commonjs" - Export by setting a property of exports: exports["Library"] = xxx
      "commonjs2" - Export by setting module.exports: module.exports = xxx
      "amd" - Export to AMD (optionally named - set the name via the library option)
      "umd" - Export to AMD, CommonJS2 or as property in root
      

      一般采用通用類型umd伪阶。library用來指定你使用require時的模塊名。

   3. 擴展externals处嫌，這項配置不處理的某些以依賴庫栅贴。比如，我們的組件是基于React的熏迹，如果我們的組件也是用在React項目里檐薯，那組件依賴的React就不需要進行babel轉(zhuǎn)義了。如果轉(zhuǎn)義注暗，那樣打出來的包就會特別大厨剪，沒必要。不過在測試開發(fā)階段友存，這項應該注釋掉祷膳，在打包發(fā)布之前加上就可以。

3. 配置package.json：

   "main": "build/component.js"
   

   只需要在main這項定義打包后的組件的位置就OK了屡立。

打包發(fā)布

1. 執(zhí)行yarn build打包后直晨，在build目錄會生成app.js文件和component.js文件。但是我們這里只需要component.js文件膨俐，因為我沒有對webpack.config.js做環(huán)境的區(qū)分勇皇，所以會將entry項的文件都打包出來。現(xiàn)在我們webpack配置比較簡單焚刺，所以需要手動處理敛摘，將app.js刪除后再提交。

2. 現(xiàn)在開始發(fā)布

   #先登錄NPM賬號：
   npm login
   
   #會依次讓你輸入用戶名乳愉、密碼兄淫、和郵箱
   Username: simbawu        
   Password:
   Email: (this IS public) wsbin610@163.com
   
   #登錄成功會出現(xiàn)以下提示信息：
   Logged in as simbawu on https://registry.npmjs.org/.
   
   #執(zhí)行發(fā)布命令：
   npm publish
   
   #發(fā)布成功后會出現(xiàn)以下提示信息：
   + react-components-calendar@0.0.7  
   #這里react-components-calendar是我的NPM包名屯远，0.0.7是包的版本號
   

3. 接下來，我們可以在NPM官網(wǎng)捕虽，通過搜索包名或者在個人中心看到剛剛發(fā)布的包慨丐。
   

   NPM

測試驗證

1. 安裝剛剛發(fā)布的包

   yarn add react-components-calendar --dev
   

2. 安裝成功后，在之前我們引入開發(fā)的組件的地方將引用路徑替換為包引用

   // import Calendar from '../../../components/index.js'
   import Calendar from 'react-components-calendar'
   

3. 注釋webpack.config.js中的externals這項

   output: {
       path: path.resolve(__dirname, '../build'),
       filename: '[name].js',
       publicPath: "/build/",
       libraryTarget: 'umd',
       library: 'Calendar'
     },
     // externals: {
     //   'react': 'react',
     //   'react-dom': 'react-dom'
     // },
   

4. 啟動項目泄私，查看效果房揭。

   yarn start
   

   Calendar Preview

最后，祝賀大功告成晌端！趕緊去發(fā)自己的第一個包吧～

附上本項目的源碼：react-components-calendar捅暴。