[译]webpack官网文档：指南 -- 15.创建库-优快云博客

本文介绍如何使用 Webpack 打包 JavaScript 库，包括配置 externals 以排除 lodash 这样的外部依赖，设置 library 和 libraryTarget 以支持多种模块加载方式。

原创翻译，转载请注明出处。

原文地址：https://webpack.js.org/guides/author-libraries/

webapck作为一个打包的工具，既可以打包应用代码也可以打包库代码。如果你是一个JavaScript库的作者，并且正在寻找一种简单的打包方法的话，那么这篇文档会给你帮助。

创建一个库

假设你正在写一个叫webpack-numbers的小的库，它可以把1到5的数字转换为文本显示，反之亦然。这个实现使用ES2015模块，看起来像这样：

src/index.js

import _ from'lodash';
import numRef from'./ref.json';
 
exportfunctionnumToWord(num){
    return _.reduce(numRef,(accum, ref)=>{
        return ref.num === num ? ref.word : accum;
    },'');
};
 
exportfunctionwordToNum(word){
    return _.reduce(numRef,(accum, ref)=>{
        return ref.word === word && word.toLowerCase()? ref.num : accum;
    },-1);
};

这个库的用法像这样：

import*as webpackNumbers from'webpack-numbers';
 
...
webpackNumbers.wordToNum('Two')// output is 2
...
 
// CommonJS modules
 
var webpackNumbers =require('webpack-numbers');
 
...
webpackNumbers.numToWord(3);// output is Three
...

// Or as a script tag
 
<html>
...
<script src="https://unpkg.com/webpack-numbers"></script>
<script>
    ...
    /* webpackNumbers is available as a global variable */
    webpackNumbers.wordToNum('Five') //output is 5
    ...
</script>
</html>

库的全部配置和代码请参照 webpack-library-example。

配置webpack

现在轮到怎样打包这个库。

不用绑定lodash，要求用去加载它。
库的名称是webpack-numbers，变量名是webpackNumbers。
可以通过import webpackNumbers from 'webpack-numbers' 或者 require('webpack-numbers')两种方式引入库。
当通过script标签引入库的时候，就可以通过全局变量webpackNumbers 来访问库。
库可以在Node.js内被访问。

添加webpack

添加基础的webpack配置。

webpack.config.js

var path =require('path');
 
module.exports ={
    entry:'./src/index.js',
    output:{
        path: path.resolve(__dirname,'dist'),
        filename:'webpack-numbers.js'
    }
};

这些基础配置用来打包库。

添加externals

现在运行webpack，你会发现创建了一个稍大的包文件。检查代码的话，你会发现lodash被打包到你的代码里。这对你来说没有任何必要。因此你可能希望把这些外部库的控制权让给使用你的库的用户。

可以通过配置externals来实现：

webpack.config.js

module.exports ={
    ...
    externals:{
        "lodash":{
            commonjs:"lodash",
            commonjs2:"lodash",
            amd:"lodash",
            root:"_"
        }
    }
    ...
};

它表示你的库期待使用一个叫lodash的依赖，它存在于用户环境里。

添加libraryTarget

为了使库能被刚广泛的使用，他们希望它在不同的环境里都兼容。例如CommonJS，AMD，Node.js，并且可以当作一个全局变量。

为了使你的库可以重用，需要在webpack配置里添加library属性。

webpack.config.js

module.exports ={
    ...
    output:{
        ...
        library:'webpackNumbers'
    }
    ...
};

这样就可以使你的库在被引用的时候，可以当一个全局变量使用。为了使库能在别的环境里也可用，在配置里添加libraryTarget属性。

webpack.config.js

module.exports ={
    ...
    output:{
        ...
        library:'webpackNumbers',
        libraryTarget:'umd'// Possible value - amd, commonjs, commonjs2, commonjs-module, this, var
    }
    ...
};

如果library被设定了但是libraryTarget没设定的话，libraryTarget默认为var，在config reference有解释。

最后的步骤

把生成的包文件的地址加到package.json里的main键值里。

package.json

{
    "main":"dist/webpack-numbers.js",
    "module":"src/index.js",// To add as standard module as per https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md#typical-usage
}

main键值出自package.json的标准，module键值出自一个建议（注1），可以使JavaScript生态系统不用打破向后兼容，升级使用ES2015模块。

注1：https://github.com/rollup/rollup/wiki/pkg.module

现在你就可以把它作为npm包来发布它，并在unpkg.com里找到它，分享给你的用户。

-- End --