使用Babel

Question

我正在尝试使用Babel将两个ES6文件编译成单个ES5输出文件。生成的文件似乎包含DUPLICATED声明，如：

var _createClass = function () { ... }

和

Object.defineProperty(exports, '__esModule', {value: true});

以下是文件：

File1（./ec6/ec6Class.js）

export class MyClass {
    constructor(dep1, dep2) {

    }

    foo() {
        console.log('foo')
    }
}

文件2（./ec6/ec6Class2.js）

import MyClass from './ec6Class';

export class MyClass2 extends MyClass {
    constructor(dep1, dep2) {
        super(dep1, dep2)
    }

    bar() {
        console.log('bar')
    }
}

我的Babel CLI命令是：

babel src/client/ec6 --out-file script-compiled.js

如何使用Babel基础架构的单一声明将这两个文件编译为单个文件？具有重复的声明不是所期望的行为。

Answer 1

我认为问题在于你告诉Babel编译它在src/client/ec6中找到的所有文件，而你想要的是一个单一的入口点（事实上，你已经拥有了它）。 Babel将编译ec6Class.js一次，因为它是该目录中的文件，然后是第二次，因为它是在ec6Class2.js中导入的。

尝试

babel src/client/ec6/ec6Class2.js --out-file script-compiled.js

修改
对不起，我回答得太快了。事实上，Babel只是将一个javascript文件从最新版本的ES转换为更兼容的版本。你需要的是将它与Webpack结合起来，Webpack — The Confusing Parts是一个将你的多个javascript文件“打包”成一个的工具（它也可以缩小它们）。

您可以从命令行使用Webpack，并告诉它使用Babel来首先转换文件。要获得良好的入门指南，您可以在中等版本上阅读{{3}}。