webpack 构建开发一个自己的js library库

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我不知道怎么单元测试这些借口才不加的