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

Question

在一个 maven 项目中，是否已经有一种首选方法如何使用 traceur 或 Babel（以前称为 6to5）将 ECMAScript6 代码转换为 ECMAScript5？我已经在网上搜索过，没有任何结果。

Answer 1

这可能不是您问题的确切解决方案，但我这样做的方法是使用 https://github.com/eirslett/frontend-maven-plugin ，这反过来又允许我在构建过程中（以及在构建的不同阶段）使用 Grunt 任务。然后通过让 Grunt 对我可用，我创建了一个 grunt 任务来使用 grunt-babel 来转换我的文件。

如果您愿意，该插件还允许您使用 gulp。

我也在测试阶段使用相同的设置来运行 Karma 和 JSHint。

希望这会有所帮助，

M

编辑：值得注意的是，插件执行的节点安装是项目本地的。所以不需要全局安装节点。

Answer 2

我使用了上述很棒的前端-maven-plugin 建议并让它全部工作，但遇到了一些问题，所以我想我会发布一个更完整的解决方案，可以盲目地复制并粘贴到您的构建文件中。 I wrote a detailed blog post about it here 及其略删节的版本如下：

我的 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 文件中的这些文件的问题。我尝试在各种构建阶段和各种类似的事情中将文件明显复制到目标爆炸的战争文件夹，但都没有奏效。

解决方案最终只是通过在 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 次才成功抓取依赖项！）

my blog post 包含 package.json 和 GruntFile.js 文件的样子。

Answer 3

自此更新以来已经有几年了，并且提供的解决方案无法从全新安装中运行。经过一番摆弄，这是我想出的：

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

Node 和 NPM 下载/安装 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

在与 pom.xml 相同的项目级别，创建一个 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 会调用 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' ]);
};

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

注意：当你最终运行 mvn install 时，如果你收到这个错误信息......

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

....表示源文件路径拼写错误或目的地不可写

通天塔

最后，我们需要告诉 Babel 我们希望它从 ES6 转换到 ES5。为此，请在与“pom.xml”、“package.json”和“Gruntfile.js”相同的目录中创建一个“.babelrc”文件。用这个填充它：

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

现在只要交叉你的手指并运行......

mvn 安装

...您的构建应该运行并转译您的 JS。