Есть ли способ сгенерировать несколько переданных файлов, используя разные конфиги с babel?

Question

Я довольно новичок как в сценариях NPM, так и в Babel. Я использовал Gulp раньше, но я пытаюсь перейти к сценариям Webpack + NPM или даже к сборкам NPM, только когда Webpack не нужен. Это один из таких примеров последнего.

Я бы хотел

• используйте мой основной файл ES6 + JS src/main.js

• используйте babel для создания довольно современного файла сценария docs/main.js, используя цель вроде:

  browsers: [
         'Chrome >= 60',
         'Safari >= 10.1',
         'iOS >= 10.3',
         'Firefox >= 54',
         'Edge >= 15',
  ],
  

• снова используйте babel, чтобы создать более «унаследованную» версию сценариев docs/main.legacy.js, используя цель типа:

  "browsers": ["> 1%, not ie 11, not op_mini all"]

• использовать сценарии npm для создания из этого двух задач сборки, которые позже я могу поместить в одну команду, например npm run build

Прочитав статью Филиппа Уолтона о создании нескольких целей в процессе его сборки, я хотел бы знать:

1. Возможно ли это с помощью сценариев NPM, только если мне не нужен Webpack?
2. Каков рекомендуемый порядок действий для включения такой функции?

---

Мои попытки: package.json

"scripts": {
    "buildModern": "babel src/main.js -o docs/main.js -presets=env",
    "buildLegacy": "babel --no-babelrc src/main.js > docs/main.legacy.js",
    "build": "echo '=> Building Source Files' && buildModern && buildLegacy"
},

Answer 1

Так что для тех, кто может наткнуться на это в будущем, желающих сделать подобное, вот что я придумал.Спасибо Дэну за совет.

1. Вам нужно будет создать файл .babelrc и в нем использовать параметр "env", который будет содержать столько окружений, сколько вы хотите.
2. Установите BABEL_ENV=name, заменив name на одно из имен, указанных в вашем конфигурационном файле.

3. Следуйте этому с вашими командами babel cli или чем угодно, что вы хотите сделать.Например,

   cross-env BABEL_ENV=modern babel src/js/main.js -o docs/js/main.min.js && echo Building ES6+ Files...`
   

4. Обязательно установите необходимые зависимости npm по мере необходимости.Надеюсь, это поможет.

Вот пример моего файла конфигурации

{
    "env": {
        "legacy": {
            "presets": [
                ["minify"],
                ["env", {
                    "targets": {
                        "browsers": ["> 1%, not ie 11, not op_mini all"]
                    }
                }]
            ]
        },
        "modern": {
            "presets": [
                ["minify"],
                ["env", {
                    "targets": {
                        "browsers": [
                            "Chrome >= 60",
                            "Safari >= 10.1",
                            "iOS >= 10.3",
                            "Firefox >= 54",
                            "Edge >= 15"
                        ]
                    }
                }]
            ]
        }
    }
}

Answer 2

Один из способов иметь несколько конфигов babel - это использовать различные среды в вашем .babelrc файле (с помощью опции env) и настраивать их, устанавливая переменную BABEL_ENV внутри каждого из ваших сценариев NPM.

Подход только Babel будет хорошо работать для переноса отдельных файлов JS, но если вы хотите импортировать другие модули в ваш файл и заставить его работать в браузере, вам потребуется пакет, такой как Webpack или Rollup.

Редактировать: См. Описание Кено ниже.