使用模块化工具打包本身开发的JS库(webpack/rollup)对比总结

时间 2019-11-09

标签使用模块化工具打包本身开发 webpack rollup 对比总结栏目 JavaScript 繁體版

原文原文链接

打包JS库demo项目地址：https://github.com/BothEyes1993/bes-jstoolsjavascript

背景

最近有个需求，须要为小程序写一个SDK，监控小程序的后台接口调用和页面报错(相似fundebug)css

听起来高大上的SDK，其实就是一个JS文件，相似平时开发中咱们引入的第三方库:html

const moment = require('moment');
moment().format();

小程序的模块化采用了Commonjs规范。也就是说，我须要提供一个monitor.js文件，而且该文件须要支持Commonjs，从而能够在小程序的入口文件app.js中导入：vue

// 导入sdk
const monitor = require('./lib/monitor.js');
monitor.init('API-KEY');

// 正常业务逻辑
App({
    ...
})

因此问题来了，我应该怎么开发这个SDK? (注意：本文并不具体讨论怎么实现监控小程序)java

方案有不少种：好比直接把全部的逻辑写在一个monitor.js文件里，而后导出node

module.exports = {
    // 各类逻辑
}

可是考虑到代码量，为了下降耦合度，我仍是倾向于把代码拆分红不一样模块，最后把全部JS文件打包成一个monitor.js。平时有使用过Vue和React开发的同窗，应该能体会到模块化开发的好处。react

src目录下存放源代码，dist目录打包最后的monitor.jswebpack

src/main.js SDK入口文件git

import { Engine } from './module/Engine';

let monitor = null;

export default {
    init: function (appid) {
        if (!appid || monitor) {
            return;
        }
        monitor = new Engine(appid);
    }
}

// src/module/Engine.js

import { util } from '../util/';

export class Engine {
    constructor(appid) {
        this.id = util.generateId();
        this.appid = appid;
        this.init();
    }

    init() {
        console.log('开始监听小程序啦~~~');
    }
}

// src/util/index.js

export const util = {
    generateId() {
        return Math.random().toString(36).substr(2);
    }
}

因此，怎么把这堆js打包成最后的monitor.js文件，而且程序能够正确执行？es6

webpack

我第一个想到的就是用webpack打包，毕竟工做常常用React开发，最后打包项目用的就是它。
基于webpack4.x版本

npm i webpack webpack-cli --save-dev

靠着我对于webpack玄学的微薄知识，含泪写下了几行配置:
webpack.config.js

var path = require('path');
var webpack = require('webpack');
module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'monitor.js',
    }
};

运行webpack，打包却是打包出来了，可是引入到小程序里试试

小程序入口文件app.js

var monitor = require('./dist/monitor.js');

控制台直接报错。。。

缘由很简单：打包出来的monitor.js使用了eval关键字，而小程序内部并支持eval。

咱们只须要更改webpack配置的devtool便可

var path = require('path');
var webpack = require('webpack');
module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'monitor.js',
    },
    devtool: 'source-map'
};

source-map模式就不会使用eval关键字来方便debug,它会多生成一个monitor.js.map文件来方便debug

再次webpack打包，而后倒入小程序，问题又来了：

var monitor = require('./dist/monitor.js');
console.log(monitor); // {}

打印出来的是一个空对象！

//src/main.js

import { Engine } from './module/Engine';

let monitor = null;

export default {
    init: function (appid) {
        if (!appid || monitor) {
            return;
        }
        monitor = new Engine(appid);
    }
}

monitor.js并无导出一个含有init方法的对象!

咱们指望的是monitor.js符合commonjs规范，可是咱们在配置中并无指出，因此webpack打包出来的文件，什么也没导出。

咱们平时开发中，打包时也不须要导出一个变量，只要打包的文件能在浏览器上当即执行便可。你随便翻一个Vue或React的项目，看看入口文件是咋写的?

main.js

import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

是否是都相似这样的套路，最后只是当即执行一个方法而已，并无导出一个变量。

### libraryTarget

libraryTarget就是问题的关键，经过设置该属性，咱们可让webpack知道使用何种规范导出一个变量

var path = require('path');
var webpack = require('webpack');
module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'monitor.js',
        libraryTarget: 'commonjs2'
    },
    devtool: 'source-map'
    
};

commonjs2就是咱们但愿的commonjs规范

从新打包，此次就正确了

var monitor = require('./dist/monitor.js');
console.log(monitor);

咱们导出的对象挂载到了default属性上，由于咱们当初导出时：

export default {
    init: function (appid) {
        if (!appid || monitor) {
            return;
        }
        monitor = new Engine(appid);
    }
}

如今，咱们能够愉快的导入SDK

var monitor = require('./dist/monitor.js').default;
monitor.init('45454');

你可能注意到，我打包时并无使用babel，由于小程序是支持es6语法的，因此开发该sdk时无需再转一遍，若是你开发的类库须要兼容浏览器，则能够加一个babel-loader

module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }

注意点：

1，平时开发调试sdk时能够直接webpack -w
2，最后打包时，使用webpack -p进行压缩

完整的webpack.config.js

var path = require('path');
var webpack = require('webpack');
module.exports = {
    mode: 'development', // production
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'monitor.js',
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    devtool: 'source-map' // 小程序不支持eval-source-map
};

其实，使用webpack打包纯JS类库是很简单的，比咱们平时开发一个应用，配置少了不少，毕竟不须要打包css，html，图片，字体这些静态资源，也不用按需加载。

### rollup

文章写到这里原本能够结束了，可是在前期调研如何打包模块的时候，我特地看了下Vue和React是怎么打包代码的，结果发现，这俩都没使用webpack，而是使用了rollup。

Rollup 是一个 JavaScript 模块打包器，能够将小块代码编译成大块复杂的代码，例如 library 或应用程序。

Rollup官网的这段介绍，正说明了rollup就是用来打包library的。
https://www.rollupjs.com/guide/zh#-using-plugins-

若是你有兴趣，能够看一下webpack打包后的monitor.js，绝对会吐槽，这一坨代码是啥东西？

module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};
/******/
/******/     // The require function
/******/     function __webpack_require__(moduleId) {
/******/
/******/         // Check if module is in cache
/******/         if(installedModules[moduleId]) {
/******/             return installedModules[moduleId].exports;
/******/         }
/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             i: moduleId,
/******/             l: false,
/******/             exports: {}


// 如下省略1万行代码

webpack本身实现了一套__webpack_exports__ __webpack_require__ module机制

/***/ "./src/util/index.js":
/*!***************************!*\
  !*** ./src/util/index.js ***!
  \***************************/
/*! exports provided: util */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "util", function() { return util; });
const util = {
    generateId() {
        return Math.random().toString(36).substr(2);
    }
}

/***/ })

它把每一个js文件包裹在一个函数里，实现模块间的引用和导出。

若是使用rollup打包，你就会惊讶的发现，打包后的代码可读性简直和webpack不是一个级别！

npm install --global rollup

新建一个rollup.config.js

export default {
  input: './src/main.js',
  output: {
    file: './dist/monitor.js',
    format: 'cjs'
  }
};

format: cjs指定打包后的文件符合commonjs规范

运行rollup -c

这时会报错，说[!] Error: Could not resolve '../util' from src\module\Engine.js

这是由于，rollup识别../util/时，并不会自动去查找util目录下的index.js文件(webpack默认会去查找)，因此咱们须要改为../util/index

打包后的文件：

'use strict';

const util = {
    generateId() {
        return Math.random().toString(36).substr(2);
    }
};

class Engine {
    constructor(appid) {
        this.id = util.generateId();
        this.appid = appid;
        this.init();
    }

    init() {
        console.log('开始监听小程序啦~~~');
    }
}

let monitor = null;

var main = {
    init: function (appid) {
        if (!appid || monitor) {
            return;
        }
        monitor = new Engine(appid);
    }
}

module.exports = main;

是否是超简洁！

并且导入的时候，无需再写个default属性
webpack打包

var monitor = require('./dist/monitor.js').default;
monitor.init('45454');

rollup打包

var monitor = require('./dist/monitor.js');
monitor.init('45454');

一样，平时开发时咱们能够直接rollup -c -w，最后打包时，也要进行压缩

npm i rollup-plugin-uglify -D

import { uglify } from 'rollup-plugin-uglify';
export default {
  input: './src/main.js',
  output: {
    file: './dist/monitor.js',
    format: 'cjs'
  },
  plugins: [
    uglify()
  ]
};

固然，你也可使用babel转码

npm i rollup-plugin-terser babel-core babel-preset-latest babel-plugin-external-helpers -D

.babelrc

{
  "presets": [
    ["latest", {
      "es2015": {
        "modules": false
      }
    }]
  ],
  "plugins": ["external-helpers"]
}

rollup.config.js

import { terser } from 'rollup-plugin-terser';
import babel from 'rollup-plugin-babel';
export default {
    input: './src/main.js',
    output: {
        file: './dist/monitor.js',
        format: 'cjs'
    },
    plugins: [
        babel({
            exclude: 'node_modules/**'
        }),
        terser()
    ]
};

UMD

咱们刚刚打包的SDK，并无用到特定环境的API，也就是说，这段代码，其实彻底能够运行在node端和浏览器端。

若是咱们但愿打包的代码能够兼容各个平台，就须要符合UMD规范(兼容AMD,CMD, Commonjs, iife)

import { terser } from 'rollup-plugin-terser';
import babel from 'rollup-plugin-babel';
export default {
    input: './src/main.js',
    output: {
        file: './dist/monitor.js',
        format: 'umd',
        name: 'monitor'
    },
    plugins: [
        babel({
            exclude: 'node_modules/**'
        }),
        terser()
    ]
};

经过设置format和name，这样咱们打包出来的monitor.js就能够兼容各类运行环境了

在node端

var monitor = require('monitor.js');
monitor.init('6666');

在浏览器端

<script src="./monitor.js"></srcipt>
<script>
    monitor.init('6666');
</srcipt>

原理其实也很简单，你能够看下打包后的源码，或者看我以前写过的一篇文章

总结

rollup一般适用于打包JS类库，经过rollup打包后的代码，体积较小，并且没有冗余的代码。rollup默认只支持ES6的模块化，若是须要支持Commonjs，还需下载相应的插件rollup-plugin-commonjs

webpack一般适用于打包一个应用，若是你须要代码拆分(Code Splitting)或者你有不少静态资源须要处理，那么能够考虑使用webpack

原文地址：http://www.javashuo.com/article/p-bhferqcv-nt.html

文章二使用Rollup打包JavaScript

rollup是一款小巧的javascript模块打包工具，更适合于库应用的构建工具;能够将小块代码编译成大块复杂的代码，基于ES6
modules,它可让你的 bundle
最小化，有效减小文件请求大小,vue在开发的时候用的是webpack,可是最后将文件打包在一块儿的时候用的是 rollup.js

全局安装

npm install --global rollup

开始使用rollup

建立第一个bundle
建立main.js

console.log(111);

执行 rollup --input main.js --output bundle.js --format cjs, 该命令编译 main.js 生成 bundle.js, --format cjs 意味着打包为 node.js 环境代码, 请观察 bundle.js 文件内容

'use strict'
console.log(111);

命令行参数简介:

输入(input -i/--input)
String 这个包的入口点 (例如：你的 main.js 或者 app.js 或者 index.js)
文件(file -o/--output.file)
String 要写入的文件。也可用于生成 sourcemaps，若是适用
格式(format -f/--output.format)
关于format选项
rollup提供了五种选项:

1，amd – 异步模块定义，用于像RequireJS这样的模块加载器
2，cjs – CommonJS，适用于 Node 和 Browserify/Webpack
3，es – 将软件包保存为ES模块文件
4，iife – 一个自动执行的功能，适合做为<script>标签。（若是要为应用程序建立一个捆绑包，您可能想要使用它，由于它会使文件大小变小。）
5，umd – 通用模块定义，以amd，cjs 和 iife 为一体

使用配置文件

rollup.config.js

export default {
    input: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'cjs'
    }
};

执行 rollup -c rollup.config.js启动配置项;

rollup 提供了 --watch / -w 参数来监听文件改动并自动从新打包

使用rollup插件

npm install --save-dev rollup-plugin-json

咱们用的是 --save-dev 而不是 --save，由于代码实际执行时不依赖这个插件——只是在打包时使用。

在配置文件中启用插件

import json from 'rollup-plugin-json';
export default {
    input: './main.js',
    output: {
        file: 'bundle.js',
        format: 'umd'
    },
    plugins: [
        json(),
    ],
}

新建文件 data.json

{
    "name": "xiaoming",
    "age": 12
}

在main.js 引入 data.json

import { name } from './data.json';
console.log(name);

执行 rollup -c rollup.config.js,并查看 bundle.js

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (factory());
}(this, (function () { 'use strict';

var name = "xiaoming";

console.log(name);

})));

看到bundle中仅引用了data.json中的name字段,这是由于rollup会自动进行 Tree-shaking,main.js中仅引入了name,age并无没引用,因此age并不会被打包

rollup基础插件

rollup-plugin-alias: 提供modules名称的 alias 和reslove 功能

rollup-plugin-babel: 提供babel能力

rollup-plugin-eslint: 提供eslint能力

rollup-plugin-node-resolve: 解析 node_modules 中的模块

rollup-plugin-commonjs: 转换 CJS -> ESM, 一般配合上面一个插件使用

rollup-plugin-serve: 类比 webpack-dev-server, 提供静态服务器能力

rollup-plugin-filesize: 显示 bundle 文件大小

rollup-plugin-uglify: 压缩 bundle 文件

rollup-plugin-replace: 类比 Webpack 的 DefinePlugin , 可在源码中经过 process.env.NODE_ENV 用于构建区分 Development 与 Production 环境.

rollup于其余工具集成

打包npm 模块

于webpack和Browserify不一样, rollup 不会去寻找从npm安装到你的node_modules文件夹中的软件包;
rollup-plugin-node-resolve 插件能够告诉 Rollup 如何查找外部模块

npm install --save-dev rollup-plugin-node-resolve

打包 commonjs模块

npm中的大多数包都是以CommonJS模块的形式出现的。在它们更改以前，咱们须要将CommonJS模块转换为 ES2015 供 Rollup 处理。
rollup-plugin-commonjs 插件就是用来将 CommonJS 转换成 ES2015 模块的。
请注意，rollup-plugin-commonjs应该用在其余插件转换你的模块以前 - 这是为了防止其余插件的改变破坏CommonJS的检测

npm install --save-dev rollup-plugin-commonjs

使用babel

使用 Babel 和 Rollup 的最简单方法是使用 rollup-plugin-babel

npm install --save-dev rollup-plugin-babel

新建.babelrc

{
    "presets": [
        ["latest", {
            "es2015": {
                "modules": false
            }
        }]
    ],
    "plugins": ["external-helpers"]
}

1，首先，咱们设置"modules": false，不然 Babel 会在 Rollup 有机会作处理以前，将咱们的模块转成 CommonJS，致使 Rollup 的一些处理失败

2，咱们使用external-helpers插件，它容许 Rollup 在包的顶部只引用一次 “helpers”，而不是每一个使用它们的模块中都引用一遍（这是默认行为）
运行 rollup以前, 须要安装latest preset 和external-helpers插件

npm i -D babel-preset-latest babel-plugin-external-helpers

一个简单的配置项

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import json from 'rollup-plugin-json';
export default {
    input: './main.js',
    output: {
        file: 'bundle.js',
        format: 'umd'
    },
    watch: {
        exclude: 'node_modules/**'
    },
    plugins: [
        resolve(),
        commonjs(),
        json(),
        babel({
            exclude: 'node_modules/**',
            plugins: ['external-helpers'],
        }),
    ],
}

原文地址：https://www.jianshu.com/p/6a7413481bd2

附一份react-redux开源项目的rollup配置文件

import nodeResolve from 'rollup-plugin-node-resolve'     // 帮助寻找node_modules里的包
import babel from 'rollup-plugin-babel'                             // rollup 的 babel 插件，ES6转ES5
import replace from 'rollup-plugin-replace'                       // 替换待打包文件里的一些变量，如 process在浏览器端是不存在的，须要被替换
import commonjs from 'rollup-plugin-commonjs'              // 将非ES6语法的包转为ES6可用
import uglify from 'rollup-plugin-uglify'                              // 压缩包

const env = process.env.NODE_ENV

const config = {
  input: 'src/index.js',
  external: ['react', 'redux'],                           // 告诉rollup，不打包react,redux;将其视为外部依赖
  output: { 
    format: 'umd',       　　　　　　　　　　 // 输出 ＵＭＤ格式，各类模块规范通用
    name: 'ReactRedux',　　　　　　　　　// 打包后的全局变量，如浏览器端 window.ReactRedux　
    globals: {
      react: 'React',                                         // 这跟external 是配套使用的，指明global.React便是外部依赖react
      redux: 'Redux'
    }
  },
  plugins: [
    nodeResolve(),
    babel({
      exclude: '**/node_modules/**'
    }),
    replace({
      'process.env.NODE_ENV': JSON.stringify(env)
    }),
    commonjs()
  ]
}

if (env === 'production') {
  config.plugins.push(
    uglify({
      compress: {
        pure_getters: true,
        unsafe: true,
        unsafe_comps: true,
        warnings: false
      }
    })
  )
}

export default config