Question

目标是创建一个bower兼容包。

我是包装新手，做了一些研究，但还没有任何线索。

问题简化如下：

\src\ID.js
\src\Person.js

ID.js

export default class ID {
    static gen() {
        return 'a unique ID';
    }
}

Person.js

import ID from './ID.js';

export default class Person {
    constructor(name) {
        this.name = name;
        this.id   = ID.gen();
    }
}

唯一应该公开的课程是Person，ID只会在内部使用。

如果我想创建一个名为person的包，那么我认为最好将所有源文件构建为一个。

我知道使用ES5进行一些合并，但是对于ES6类，我不知道。

也许我可以创建一个父对象来保存这两个类？但我真的想知道正确的方法。如果没有这种方式，我也会采取像编译ES6到ES5方法的东西。

Answer 1

您可以使用汇总：https://github.com/rollup/rollup（我假设您安装了nodejs）

$ npm install -g rollup

$ rollup --input src/Person.js --output dist/Person.js --format iife --name Person

此命令生成此文件：

var Person = (function () { 'use strict';

    class ID {
        static gen() {
            return 'a unique ID';
        }
    }

    class Person {
        constructor(name) {
            this.name = name;
            this.id   = ID.gen();
        }
    }

    return Person;

})();

--format参数可以是

iife：汇总生成一个函数，将导出的变量保存到--name参数
amd，如果您使用RequireJS或其他符合AMD标准的模块管理器
cjs，如果您需要在node.js
umd = iife + amd + cjs
es6（默认值）：汇总使用es6模块导出变量

如果您需要在不支持ES6的浏览器中运行您的代码，您可以使用babel进行转换：

$ npm install rollup-plugin-babel
$ npm install babel-preset-es2015-rollup

$ rollup --config config.js --input src/Person.js --output dist/Person.js

config.js：

var babel = require("rollup-babel-plugin");

module.exports = {
  format: "iife", // --format
  moduleName: "person", // --name
  plugins: [
    babel({
      presets: [
        require("babel-preset-es2015-rollup")
      ],
    }),
  ],
};

如何合并ES6类源文件？

1 个答案: