Maven Plugin, который переводит ES6 на ES5, который использует Traceur или Babel

Ответ 1

Это может быть не точное решение вашей проблемы, но способ, которым я это делаю, - это https://github.com/eirslett/frontend-maven-plugin, что, в свою очередь, позволяет мне использовать задачи Grunt в процессе сборки (и на разных этапах сборки). Затем, имея доступ к Grunt, я создал задачу grunt, чтобы использовать grunt-babel для преобразования моих файлов.

Плагин также позволяет использовать gulp, если вы предпочитаете.

Я также использую ту же самую настройку для запуска Karma и JSHint во время тестовой фазы.

Надеюсь, что это поможет,

M

Изменить: стоит отметить, что установка node, которую делает плагин, является локальной для проекта. Поэтому не нужно устанавливать глобально node.

Ответ 2

Я использовал вышеупомянутое удивительное предложение frontend-maven-plugin и получил все, что работал, но столкнулся с парой, поэтому я решил, что опубликую более полное решение, готовое быть вслепую скопированным и вставленным в ваши файлы сборки. Я написал подробное сообщение в блоге об этом здесь, и немного сокращенная версия этого ниже:

Мой раздел frontend-maven-plugin в моем pom.xml выглядел следующим образом:

<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 файле правильно. Я попробовал явное копирование файлов в целевую папку с взорванными войнами на разных этапах сборки и различные подобные вещи, которые все не сработали.

В результате оказалось, что нужно просто перезаписать неперетащенные файлы js, включив в него файлы с расширением в разделе webResources раздела maven-war-plugin. Который в итоге выглядел так:

<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, смешно и чего-то, чего я никогда не бывал.

Если вы получаете что-то вроде zip-ошибки или исключения во время сборки сборки frontend-maven-plugin, вероятно, это, и вы можете исправить это с помощью "чипа npm cache" и удалить "node" и "node_modules" каталогов в вашем каталоге проекта и повторных попыток (мне потребовалось 3 раза, пока он не схватил зависимостей успешно!)

И мой пост в блоге включает в себя то, как выглядели файлы package.json и GruntFile.js.

Ответ 3

Прошло несколько лет с тех пор, как это было обновлено, и предоставленное решение не работает после чистой установки. После того, как я поиграл, вот что я придумал:

Как описано выше, я использовал frontend-maven-plugin для установки Node, NPM, Grunt и Babel.

Node и NPM скачать/установить Grunt и Babel. Grunt звонит Бабель Бабель делает трансплантации.

специалист

Чтобы начать этот процесс, добавьте его в раздел сборки вашего 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 вызовет Babel для передачи вашего кода. Поэтому создайте файл "Gruntfile.js" в том же каталоге, что и pom.xml и package.json.

    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, если вы получите это сообщение об ошибке....

Предупреждение: аргумент "путь" должен иметь тип string. Полученный тип не определен. Для продолжения используйте --force

.... это означает, что либо путь к исходному файлу указан неверно, либо место назначения недоступно для записи

галдеж

Наконец, нам нужно сказать Babel, что мы хотим, чтобы он переносился с ES6 на ES5. Для этого создайте файл ".babelrc" в том же каталоге, что и ваши "pom.xml", "package.json" и "Gruntfile.js". Заполните это этим:

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

Теперь просто скрестите пальцы и бегите...

установить MVN

... и ваша сборка должна работать и переносить ваш JS.