14

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

4

3 回答 3

8

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

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

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

希望这可以帮助，

米

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

于 2015-03-10T11:44:24.043 回答
2

我使用了上面很棒的前端-maven-plugin 建议并让它全部工作，但遇到了几个问题，所以我想我会发布一个更完整的解决方案，可以盲目地复制并粘贴到你的构建文件中。我在这里写了一篇关于它的详细博客文章，下面是一个稍微删节的版本：

我的 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 transpile 步骤全部工作后，我遇到了正确获取打包 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 文件的样子。

于 2016-11-18T22:28:08.760 回答
1

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

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

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

马文

要开始此过程，请将其添加到 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 -->

新PM

在与 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。

于 2019-01-23T21:22:54.350 回答