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导出的方式和导出库名,详细见官方文档outputlibrary

设置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了,快去发布自己的插件和库吧。