FED实验室 - 专注WEB端开发和用户体验

煦涵说Webpack-Javascript库开发

煦涵说 煦涵 299℃ 0评论

已经两周左右没有写文章,今天来说说如何基于 Webpack + ES6 开发一个 javascript 库。 现在的前端生态中,我们开发一个库通常需要满足一下几点要求:

  • 可以在浏览器中通过 script 标签元素引用
  • 可以通过 npmyarn 等包管理工具下载
  • 兼容 ES6 (ES2015),commonjs,amd 规范

考虑以上需求,本篇文章以实现简单的“Javascript计算器”为例展开实践,源码戳webpack-library

webpack

基本目录结构

.
├── README.md
├── dist
├── node_modules
├── package.json
├── src
├── test
├── webpack.config.js
└── yarn.lock
  • dist: build后文件(ES5)
  • src: 当前库源文件(ES6)
  • test: 单元测试脚本
  • webpack.config.js: webpack 配置脚本

Javascript 计算器开发

源码库采用 ES6 开发,使用 Babel 编译 ES6 成 ES5。

module.exports  = class Calculator {
    /**
     * 加法
     * 
     * @param {Number} a 
     * @param {Number} b 
     * @returns 
     */
    add(a, b) {
        return a + b;
    }
    /**
     * 减法
     * 
     * @param {Number} a 
     * @param {Number} b 
     * @returns 
     */
    subtract(a, b) {
        return a - b;
    }
    /**
     * 乘法
     * 
     * @param {Number} a 
     * @param {Number} b 
     * @returns 
     */
    multiply(a, b) {
        return a * b;
    }
    /**
     * 除法
     * 
     * @param {Number} a 
     * @param {Number} b 
     * @returns 
     */
    divide(a, b) {
        return a / b;
    }
}

Webpack 配置

UMD 模式配置

我们通过 Webpack 配置来实现上述的 UMD 需求。

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: filename,
    library: 'Calculator',
    libraryTarget: 'umd',
    umdNamedDefine: true
}
  • library: 导出库文件名称
  • libraryTarget: 导出库文件模块定义模式
  • umdNamedDefine: 是否对对 UMD 的构建过程中的 AMD 模块进行命名

生成环境配置

如果是生成环境,进行 javascript 压缩,并生成 .min.js 文件。

if ('production' === ENV) {
    plugins.push(new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }));
    filename = 'calculator.min.js';
}else {
    plugins.push(new CleanWebpackPlugin(['dist'], {
        root: path.resolve(__dirname)
    }));
    filename = 'calculator.js';
}

NPM Scripts

通过配置不同的脚本来根据ENV环境输出不同文件。

  "scripts": {
    "build": "ENV=production webpack",
    "dev": "ENV=dev webpack --progress --colors --watch",
    "test": "ENV=dev webpack && mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"
  }

测试

使用 MochaChai 来进行单元测试。运行 yarn run test,执行结果如下:

Given an instance of my Calculator library
    add(1,2) 
      ✓ should return the 3
    subtract(1,2) 
      ✓ should return the -1
    multiply(1,2) 
      ✓ should return the 2
    divide(1,2) 
      ✓ should return the 0.5

  4 passing (8ms)

感谢您的阅读

EOF

作者[煦涵]

2017年09月20日

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持 喜欢 (1)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址