内容简介:前面写了个我的插件是基于es6+开发的,所以环境下会有些bable插件用于转译。假设我们现在已经完成了一个很简单的功能,他位于src文件夹下,是test.js,以简单的demo为例,此处是个Test类,如下:最后导出Test类,
前面写了个 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了,快去发布自己的插件和库吧。
欢迎关注微信公众号[ 我不会前端 ]或扫描下方二维码!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Python算法引入
- Java内存泄漏的引入
- React 中引入 Angular 组件
- TensorFlow 引入 Swift 会怎样?
- 现有iOS工程引入Flutter
- vue ssr 引入 jquery
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Base64 编码/解码
Base64 编码/解码
正则表达式在线测试
正则表达式在线测试