https://mp.weixin.qq.com/s/AFepKvK8h8kOWe8D1FQYqw
image
我们业务代码写久了，总有种抑郁不住的冲动，想要把某一段工具方法分享给所有人用，但是作为一个工具人的矜持，总不好意思和别人说，我这util方法写得好，cp使使？试试就试试，十四是十四... 咳，跑偏儿了！哈哈哈
但是冲动抑制太久也不好，万一冲动它就没了。要推广一个东西，包装先行。就拿西西最近写的小工具来说，也就是iframe之间的postMessage。给它起了个高大上的名字，叫 iframeBridge.js，然后把它发到github当成免费的静态资源服务器来用，是不是感觉就出来了。接着我们可以这么说，哎内个，我最近找了个小工具，贼好用，这个地址引入一下。再过分一点儿，上传npm，给每个项目都偷偷加个依赖哈哈哈哈。
image
装逼要全套，当然要有代码的压缩混淆啦，不然写的if else全被你们看到了，既然是JS小工具，怎么可以苦了这双挣钱的小手，用ES5的语法呢，当然是Babel啦。
webpack打包，新建一个 webpack.config.js 配置文件。
npm init 初始化，把依赖引入，缺啥引啥。
再来一个src，放开发时候的代码。
// 大概凑了一下得到的目录结构
├── demo
├── lib
├── node_modules
├── package-lock.json
├── package.json
├── readme.md
├── src
├── version
└── webpack.config.js
接着为我们的小工具js添加代码。
// src/index.js
class FileName { // 具体功能随便写
}
export default FileName
写好代码就该打包发布了，工具文件，需要能直接引入还得支持npm，library的目标选 umd ，模块的发展史就不细说了。
// webpack.config.js
...
var config = {
mode: mode, // 'production' : 'development'
entry: __dirname + '/src/index.js', // 配置入口
devtool: 'source-map', // 调试map文件
output: {
path: __dirname + '/lib', // 输出路径
filename: libraryName + outputFile, // 名字自己决定
library: libraryName, //
libraryTarget: 'umd', //
libraryExport: "default"
}
}
...
象征性的在加了个build指令，然后就开心的在控制台输入npm run build
// package.json
...
"scripts": {
"build": "webpack --env.production",
"dev": "webpack --env.development",
"test": "echo \"Error: no test specified\" && exit 1"
}
...
打开lib文件夹一看，果然打包好了，古人诚不欺我，再打开文件仔细瞅了瞅，绿油油的class类名和打了高光一样。😯，babel还没弄呢。
// .babelrc
{
"presets": [
"@babel/preset-env"
]
}
加个babel配置文件
// package.config.js
...
output: {},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/
}
]
},
resolve: {
modules: [path.resolve('./node_modules'), path.resolve('./src')],
extensions: ['.json', '.js']
}
...
这回可是不让别人看到if else代码了。
后续的单元测试，代码规则校验等自己酌情添加，根本没有什么iframe我不知道怎么单元测试这些借口才不加的🐶
网友评论