1. 簡介
我們開發(fā)一個(gè)庫叛溢，供別人使用 npm 下載使用時(shí)塑悼，為了保證兼容性和體積，應(yīng)該將其打包楷掉。本節(jié)介紹如何打包一個(gè)庫進(jìn)行發(fā)布厢蒜。
2. 初始化項(xiàng)目
首先，我們新建一個(gè)目錄烹植，叫 library-demo斑鸦，進(jìn)入該目錄，運(yùn)行命令：
npm init -y
這樣我們就初始化了一個(gè)項(xiàng)目草雕，并為其自動創(chuàng)建了一個(gè) package.json 如下：
{
"name": "library-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
這個(gè)package.json 很簡單巷屿，介紹了一些項(xiàng)目信息，以及入口文件墩虹。
3. 實(shí)現(xiàn)庫邏輯
我們實(shí)現(xiàn)以下庫邏輯嘱巾，新建目錄 src， 然后在其下新建三個(gè)文件：
// math.js
export const add = (a, b) => a + b;
export const minus = (a, b) => a - b;
// string.js
export const join = (a, b) => a + ' ' + b;
// index.js
import * as math from './math';
import * as string from './string';
export default {
math,
string
}
4. 使用 webpack 進(jìn)行打包
首先诫钓，安裝 webpack旬昭，如下：
npm i webpack webpack-cli -D
然后新建一個(gè)配置文件：
// webpack.config.js
const path = require('path');
module.exports= {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'library-demo.js'
}
};
修改 package.json 如下部分：
"main": "dist/index.js",
"scripts": {
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
然后運(yùn)行打包命令如下：
npm run build
5. umd
庫文件打包后，使用者在引入時(shí)菌湃，可能有多種方法问拘，比如 amd，cmd惧所，commonjs骤坐，甚至是直接使用 script 引入。所以我們可以將庫導(dǎo)出為一個(gè) umd 模塊纯路，支持以上所有的使用場景或油，如下：
library: "libraryDemo", // the name of the exported library
libraryTarget: "umd", // universal module definition
6. externals
假設(shè)我們開發(fā)的庫文件中本身引用了一個(gè)三方庫，如下：
// string.js
import _ from 'lodash'
export const join = (a, b) => _.join([a, b], ' ');
我們安裝 loadash 后打包：
npm i lodash -S
可以看到 lodash 被打入進(jìn)來驰唬，大大增加了包體顶岸，且拖慢了打包速度腔彰。lodash 這類三方庫其實(shí)一般都很穩(wěn)定，可以單獨(dú)拿出來加載并緩存辖佣。如下：
externals: {
_: 'lodash'
}
打包后霹抛，發(fā)現(xiàn)沒有引入 lodash，包體大大減芯硖浮：
用戶使用的時(shí)候需要自己手動引入 lodash杯拐。
7. 發(fā)布
發(fā)布前我們首先需要注冊一個(gè) npm 賬號，https://www.npmjs.com/
然后使用 npm adduser 或者 npm login 來登錄世蔗，記得在此之前將 npm 的源切換到 npm 而不是 cnpm 或者其他源端逼，除非你本意是在其他源上進(jìn)行發(fā)布。
然后 npm publish 發(fā)布即可污淋。
參考
https://webpack.js.org/configuration/
可能是最詳細(xì)的UMD模塊入門指南
JS通用模塊模式 UMD
模塊化之AMD顶滩、CMD、UMD寸爆、commonJS
webpack 的externals配置
https://webpack.js.org/configuration/externals/
