使用Babel

时间:2016-08-08 10:13:07

标签: javascript ecmascript-6 babel

我正在尝试使用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基础架构的单一声明将这两个文件编译为单个文件?具有重复的声明不是所期望的行为。

1 个答案:

答案 0 :(得分:0)

我认为问题在于你告诉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}}。