14

maven プロジェクトで traceur または Babel (以前は 6to5 という名前) を使用して ECMAScript6 コードを ECMAScript5 にトランスパイルする方法は既にありますか? 私はすでに成功せずにネットを検索しました。

4

3 に答える 3

8

これはあなたの問題に対する正確な解決策ではないかもしれませんが、これを行う方法はhttps://github.com/eirslett/frontend-maven-pluginを使用することです。これにより、ビルドプロセス中に Grunt タスクを使用できるようになります (およびビルドのさまざまなフェーズで)。次に、Grunt を利用できるようにすることで、grunt-babel を使用してファイルを変換する grunt タスクを作成しました。

このプラグインでは、必要に応じて gulp を使用することもできます。

また、テスト段階で同じセットアップを使用して Karma と JSHint を実行しています。

お役に立てれば、

M

編集：プラグインが行うノードのインストールはプロジェクトに対してローカルであることに注意してください。したがって、ノードをグローバルにインストールする必要はありません。

于 2015-03-10T11:44:24.043 に答える
2

上記の素晴らしい frontend-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 トランスパイルのステップがすべて機能するようになった後、パッケージ化された 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 キャッシュ クリーン」で修正し、プロジェクト ディレクトリの「no​​de」および「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 -->

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 を呼び出してコードを ctranspile します。そのため、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 を使用して続行します

....ソース ファイルへのパスのスペルが間違っているか、宛先が書き込み不可であることを意味します

バベル

最後に、ES6 から ES5 にトランスパイルすることを Babel に伝える必要があります。これを行うには、「pom.xml」、「package.json」、「Gruntfile.js」と同じディレクトリに「.babelrc」ファイルを作成します。これを入力してください：

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

さあ、指を交差させて走ってください...

mvn インストール

...そして、ビルドを実行して JS をトランスパイルする必要があります。

于 2019-01-23T21:22:54.350 に答える