使用Traceur或Babel的Maven插件，将ES6转译为ES5

Question

在maven项目中，使用traceur或Babel（以前称为6to5）将ECMAScript6代码转译为ECMAScript5，是否已有首选方法？我已经在网络上搜索过了，但没有找到任何成功的方法。

- Daniel K.

---

我想问一下，是否已经有解决方案可以将这些转译器集成到Maven构建中。我尝试过使用Node.js的Babel，但我希望在我的Maven项目中使用它来将ES6代码转译为ES5。 - Daniel K.

@DanielK，你已经找到答案了吗？ - VB_

@DanielK. 好的，我们已经通过gulp实现了这个功能。你觉得这个方案可行吗？如果需要，我可以提供更多细节。 - VB_

@DanielK。我也在寻找同样的东西。你能找到什么吗？ - Chirag Mongia

@ChiragMongia 不，当时我没有找到任何可靠的解决方案。也许现在情况已经改变了。 - Daniel K.

Answer 1

这可能不是解决您问题的确切方法，但我使用https://github.com/eirslett/frontend-maven-plugin进行操作，该插件允许我在构建过程中（以及不同的构建阶段）使用Grunt任务。因此，通过拥有可以使用grunt-babel转换文件的Grunt，我创建了一个grunt任务。

该插件还允许您在测试阶段运行Karma和JSHint。

希望这有所帮助，

M

编辑：值得注意的是，插件进行的节点安装是局部项目的。因此无需全局安装节点。

- Morné Louis de Jongh

Answer 2

我使用了上述强大的frontend-maven-plugin建议，并使其全部工作正常，但遇到了一些问题，所以我想发布一个更完整的解决方案，可以盲目地复制并粘贴到您的构建文件中。在这里我写了一篇详细的博客文章，其中包括如何使用Maven war构建压缩和转码Ecma6 JavaScript，以下是略微缩短的版本：

我的pom.xml文件中的frontend-maven-plugin部分最终看起来像这样：

<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.2</version>

<configuration>
    <nodeVersion>v4.6.0</nodeVersion>
</configuration>

<executions>
    <execution>
        <goals>
            <goal>install-node-and-npm</goal>
        </goals>
        <phase>generate-resources</phase>
    </execution>

    <execution>
        <id>npm install</id>
        <goals>
            <goal>npm</goal>
        </goals>
        <configuration>
            <arguments>install</arguments>
        </configuration>
    </execution>

    <execution>
        <id>grunt build</id>
        <goals>
            <goal>grunt</goal>
        </goals>
        <phase>generate-sources</phase>
    </execution>
</executions>

在成功完成Grunt转译步骤后，我遇到了将这些文件正确地打包到WAR文件中的问题。我尝试了将文件复制到目标爆炸式war文件夹的各种构建阶段和各种类似的方法，但都没有奏效。

解决方案最终是通过在maven-war-plugin部分的webResources部分包含转译后的文件来覆盖非转译的js文件。最终看起来像这样：

<plugin>
 <groupId>org.apache.maven.plugins</groupId>
 <artifactId>maven-war-plugin</artifactId>
 <version>2.2</version>
 <configuration>
     <warName>Example-1.0-SNAPSHOT</warName>
     <webResources>
         <resource>
             <directory>${project.build.directory}/dist</directory>
         </resource>
     </webResources>
 </configuration>

我也遇到了npm下载的损坏软件包的问题，并留存在全局缓存中，这在Maven中是荒谬的，我从未遇到过这种情况。

如果您在frontend-maven-plugin构建步骤期间遇到类似于zip错误或异常的情况，很可能是这个问题，您可以通过“npm cache clean”并删除项目目录中的“node”和“node_modules”目录来解决它，并再次尝试（直到成功获取依赖项为止，我尝试了3次！）

我的博客文章包括package.json和GruntFile.js文件的外观，链接：my blog post。

- meese

Answer 3

这篇文章已经好几年没有更新了，提供的解决方案在干净安装后无法使用。经过一些尝试，我得出了以下解决方案：

如上所述，我使用了frontend-maven-plugin来安装Node、NPM、Grunt和Babel。

Node和NPM下载/安装Grunt和Babel。 Grunt调用Babel Babel进行转译。

Maven

为了启动这个过程，在pom.xml的构建部分添加以下内容。

        <plugins>
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.6</version>
            <executions>
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <phase>initialize</phase>
                </execution>
                <execution>
                    <id>npm</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                    <phase>initialize</phase>
                </execution>
                <execution>
                    <id>grunt build</id>
                    <goals>
                        <goal>grunt</goal>
                    </goals>
                    <phase>generate-resources</phase>
                </execution>
            </executions>
            <configuration>
                <nodeVersion>v10.4.1</nodeVersion>
                <npmVersion>6.1.0</npmVersion>
            </configuration>
        </plugin>
        <!--- rest of your plugins follow -->

NPM

在项目的同级目录下创建一个 package.json 文件，告诉 Node/NPM 它需要安装哪些依赖到 node_modules 目录中。

    {
    "name": "npm-maven-base-project",
    "version": "0.0.1",
    "description": "Install Grunt and Babel to do some ES6 to ES5 transpiling",
    "devDependencies": {
        "@babel/core": "^7.0.0-beta.54",
        "@babel/preset-env": "^7.0.0-beta.54",
        "grunt-babel": "8.0.0-beta.0",
        "grunt": "~0.4.5",
        "grunt-cli": "1.2.0",
        "grunt-contrib-jshint": "~0.10.0",
        "grunt-contrib-nodeunit": "~0.4.1",
        "grunt-contrib-uglify": "~0.5.0",
        "load-grunt-tasks": "^3.5.2"
    },
    "main": "GruntFile.js",
    "dependencies": {

    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
    }

Grunt

接下来我们需要告诉Grunt需要做什么。在执行时，Grunt将调用Babel来转换您的代码。因此，在与pom.xml和package.json位于同一目录中创建一个'Gruntfile.js'文件。

    module.exports = function(grunt) {

    require('load-grunt-tasks')(grunt); // npm install --save-dev
    // load-grunt-tasks

    grunt.initConfig({
        babel : {
            options : {
                sourceMap : false
            },
            dist : {
                files : [{
                    'src/main/webapp/resources/scripts/destination.js' : 'src/main/webapp/resources/scripts/source.es6'
                },{
                    'src/main/webapp/resources/scripts/destination.js' : 'src/main/webapp/resources/scripts/source.es6'
                }]
            }
        }
    });

    grunt.registerTask('default', [ 'babel' ]);
};

上面的“files”条目数组列出了您要转换的所有文件。它的格式为 {'destination' : 'source'}。注意：没有防止意外覆盖的标志。

注意：当您最终运行mvn install时，如果收到以下错误消息...

警告：路径参数必须是字符串类型。接收到未定义的类型。使用--force继续

...这意味着源文件的路径拼写不正确或目标不可写。

Babel

最后，我们需要告诉Babel我们希望它将ES6转换为ES5。为此，请在与您的'pom.xml'、'package.json'和'Gruntfile.js'相同的目录中创建一个'.babelrc'文件。将其填充为以下内容：

{
    "presets": ["@babel/preset-env"]
}

现在只需祈祷并运行...

mvn install

...然后您的构建应该能够运行并转译您的JS。

- user1005939