webpack打包文件同时支持script引入和npm安装

2019年04月18日Web前端0

前面写了个recorder的录音插件，在基本功能开发完成之后，希望能在script标签的方式引入项目，也希望能用npm install的方式添加到项目中，毕竟spa项目才是主流嘛，于是尝试这用wepack来打包，同时支持script标签方式引用和npm install方式使用。

前提

我的插件是基于es6+开发的，所以环境下会有些bable插件用于转译。假设我们现在已经完成了一个很简单的功能，他位于src文件夹下，是test.js，以简单的demo为例，此处是个Test类，如下：

class Test {
    constructor() {
        this.name = 'my name';
        this.age = 123;
    }

    showName() {
        console.log(this.name);
    }

    showAge() {
        console.log(this.age);
    }
}

最后导出Test类，

export default Test;

打开当前目录下的index.html，可以看到输出的name，当然，这是以script标签引入的，这是我们默认支持的。 下面我们要修改，使得打包出的代码技能兼容script，也能支持npm方式。

引入UMD

在前面的js模块化发展历程中，我也提到过umd方式，他支持浏览器端和node端(require方式)，webpack同样也是支持该打包方式的。 首先修改webpack打包脚本，在webpack.config.js中，增加output下的参数：

libraryExport: "default",
library: "Test",
libraryTarget: "umd"

告诉webpack导出的方式和导出库名，详细见官方文档output和library。

设置index.js

我们在一个项目中import一个包或依赖时，默认访问的是该文件夹下的index.js文件，所以此处增加index.js，并设置返回打包生成的库文件，

module.exports = require("./dist/test.js");

这样就好啦。

测试

script方式

script方式的测试比较简单了，直接双击执行index.html就行了。

npm方式

我们可以将整个文件夹拷贝到一个spa项目的node_modules中，并在项目中引用该库，可以看到和在script中一致的使用效果，那么就ok了。

npm提交

在这篇发布自己的npm包中有详细提示。等npm发布后，我们可以install下，再次作下测试。 详细的demo见：webpack打包文件同时支持script引入和npm安装。

到这就ok了，快去发布自己的插件和库吧。

npmwebpack

目录