加载中...

Authoring Libraries


webpack是一个用来打包应用(application)和库(library)的代码的工具。如果你是一个JavaScript库的作者,并且想要将你的打包逻辑给流程化(streamline),那么这篇文档将会帮助到你。

创建一个库

假设你正在写一个小的 library `webpack-numbers',允许将数字1到5从数字转换为文本表示,反之亦然。实现使用 ES2015 模块,可能看起来像这样:

src/index.js

import _ from 'lodash';
import numRef from './ref.json';

export function numToWord(num) {
    return _.reduce(numRef, (accum, ref) => {
        return ref.num === num ? ref.word : accum;
    }, '');
};

export function wordToNum(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') // 输出 2
...

// 使用 CommonJS 模块引入

var webpackNumbers = require('webpack-numbers');

...
webpackNumbers.numToWord(3); // output is Three
... 
// 使用 script 标签引入

<html>
...
<script src="https://unpkg.com/webpack-numbers"></script>
<script>
    ...
    /* webpackNumbers 是一个全局变量 */
    webpackNumbers.wordToNum('Five') //输出 5
    ...
</script>
</html> 

完整的源代码和配置请参阅 webpack-library-example

配置 webpack

现在需要打包这个库,同时要完成以下要求:

  • 不要打包 lodash,而是引用(require)用户加载好的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 和你的代码被一起打包了。 然而对于你的库本身来说,并不需要打包 lodash。因此你可能会想将该外部库(external)的控制权交给你的库的用户。

这一点可以通过配置 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' // 其他可取值 - amd, commonjs, commonjs2, commonjs-module, this, var
    }
    ...
}; 

如果设置了 library 但没设置 libraryTarget, 则libraryTarget 默认为 var,详见 config 文档 。

最终步骤

使用 webpack 打包你的生产代码.

package.json 中指定主文件(main file)为你生成的文件的路径。

package.json

{
    ...
    "main": "dist/webpack-numbers.js",
    "module": "src/index.js", // 增加标准的模块,参照: https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md#typical-usage
    ...
} 

现在你可以 将其作为一个 npm 包来发布 并且在 unpkg.com 找到它并向你的用户分发。

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


还没有评论.