Question

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

Answer 1

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

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

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

希望这有帮助，

中号

编辑：值得注意的是插件所执行的节点安装是项目的本地安装。因此无需全局安装节点。

Answer 2

我使用了上面很棒的frontend-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 transile步骤后，我遇到了正确处理打包的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”修复它并删除＆＃34;节点＆＃ 34;和＆＃34; node_modules＆＃34;你的项目目录中的目录并再次尝试（它花了我3次，直到它成功地抓住了依赖项！）

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

Answer 3

已经更新了几年了，提供的解决方案无法从全新安装中使用。经过一番摆弄之后，我想到了：

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

节点和NPM下载/安装Grunt和babel。咕unt声叫通天塔 Babel进行转码。

Maven

要开始此过程，请将其添加到pom.xml的build部分中。

        <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安装时，如果收到此错误消息。...

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

....这意味着源文件的路径拼写错误或目标文件不可写

通天塔

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

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

现在只要交叉手指然后跑...

mvn安装

...，您的构建应运行并转换您的JS。

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

3 个答案: