使用webpack打包JS依賴庫

這里的依賴庫是指給第三方平台使用的JS庫文件。與普通的web應用代碼不同，依賴庫要正確設置導出的內容

配置項

主要有三個配置項

library

生成庫的名稱（非文件名）

libraryTarget

配置以哪種方式暴露library

• var / assign: 暴露為一個變量
• this / window / global / commonjs：在對象上賦值暴露
• commonjs2 / amd / umd：指定兼容特定的模塊系統

libraryExport

配置哪個模塊將被暴露，可以是字符串或字符串數組。默認是undefined

如libraryTarget為umd時，源碼通過export default xxx 導出，如不設置libraryExport，則使用該庫時直接引入不是xxx，而是一個對象，它有一個default屬性，值為xx

遇到的一些問題

導出后的內容多了一個default屬性

源碼

function xxx () {
    
}
export default xxx;

webpack 部分配置：

output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    library: 'xxx',
    libraryTarget: 'umd',
}

通過script引入打包后的代碼，window.xxx 並非是上面導出的內容，而是一個對象，其default屬性是真正導出的內容

排查過程：

查看webpack打包后的代碼，發現在是這樣導出的

// ... 此處是xxx的聲明和定義

exports.default = xxx

但源碼里是通過ES6的module語法導出的，由此想到webpack使用的commonjs規范，因此自動將ES6里的export default轉為了exports.default，所以打包后導出的內容多啦一個default屬性

解決

主要目的是把default干掉，直接導出xxx，查看webpack文檔，發現可以通過libraryExport配置暴露（導出）哪個模塊

最終將libraryExport設置為xxx，就解決啦！