Как я могу использовать ES6 в webpack.config.js?

210

Как использовать ES6 в webpack.config? Как этот репозиторий https://github.com/kriasoft/react-starter-kit делает?

Например:

используя это

import webpack from 'webpack';

вместо того

var webpack = require('webpack');

Это скорее любопытство, а не необходимость.

Whisher
источник
@ Да, это вопрос. Я не могу понять это. Потому что, если я использую синтаксис es6 в webpack.config, я получаю ошибки.
Whisher
21
Вопрос в том, как использовать es6 в webpack.config. Мне кажется, это понятно. Я обновляю свой вопрос примером.
Whisher
1
Файл анализируется с помощью node.js, который по умолчанию не поддерживает es6. Есть флаги командной строки, чтобы включить это, но я не знаю, что они. Вы также можете попробовать использовать io.js вместо узла
KJ Tsanaktsidis
@KJTsanaktsidis спасибо за подсказку, но я также попытался с - гармония безуспешно
Whisher
Я не пробовал это, но попробуйте запустить "node --harmony which webpack"
KJ Tsanaktsidis

Ответы:

230

Попробуйте назвать свой конфиг как webpack.config.babel.js. Вы должны включить Babel-Register в проект. Пример при реакции-роутере-бутстрапе .

Webpack полагается на внутреннюю интерпретацию, чтобы сделать эту работу.

Юхо Вепсяляйнен
источник
4
Это сработало для меня. Я npm runэтот скрипт: webpack --config webpack.config.babel.js.
Мат Гессель
9
Я думаю, что это могло бы быть в состоянии поднять это непосредственно, даже без --config.
Юхо Вепсяляйнен,
4
Я думаю, что следует добавить, что babel-loaderмодуль также требуется
флипчарт
7
На самом деле, он работает нормально, просто нужно установить пресеты babel в файле .babelrc.
Питер
10
Я использовал эту конкретную предустановку, чтобы заставить это работать:echo '{ "presets": ["es2015"] }' > .babelrc
killthrush
39

В качестве альтернативы тому, что предлагает @bebraw, вы можете создать скрипт автоматизации JavaScript с синтаксисом ES6 +:

// tools/bundle.js

import webpack from 'webpack';
import webpackConfig from './webpack.config.js'; // <-- Contains ES6+

const bundler = webpack(webpackConfig);

bundler.run(...);

И выполнить это с Babel:

$ babel-node tools/bundle

PS : вызов веб-пакета через JavaScript API может быть лучшим подходом (чем вызов через веб-интерфейс), когда вам нужно реализовать более сложные шаги сборки. Например, после того, как пакет на стороне сервера готов, запустите сервер приложений Node.js и сразу после запуска сервера Node.js запустите сервер BrowserSync dev.

Смотрите также:

Константин Таркус
источник
2
Хотя это немного сложно, это именно то, что использует реагирующий стартовый набор. Это должен быть лучший ответ.
darkbaby123
20

Другой подход заключается в НПМ скрипт вроде этого: "webpack": "babel-node ./node_modules/webpack/bin/webpack"и запустить его следующим образом: npm run webpack.

AlexB
источник
Похоже, что это не работает при передаче пользовательской конфигурации в веб-пак babel-node ./node_modules/webpack/bin/webpack --config custom-webpack.config
Абхинав
16

У меня возникла проблема с запуском решения @ Juho с Webpack 2. Документы по миграции Webpack предлагают вам отказаться от разбора модуля babel:

Важно отметить, что вы захотите сказать Babel не анализировать эти символы модуля, чтобы веб-пакет мог их использовать. Вы можете сделать это, установив следующее в опциях .babelrc или babel-loader.

.babelrc:

{
    "presets": [
         ["es2015", { "modules": false }]
    ]
}

К сожалению, это вступает в противоречие с функциональностью автоматического регистра Babel. Удаление

{ "modules": false }

из вавилонского конфига опять все заработало. Тем не менее, это может привести к прерыванию тряски дерева, поэтому полное решение будет включать перезапись предустановок в параметрах загрузчика :

module: {
    rules: [
        {
            test: /\.js$/,
            include: path.resolve('src'),
            loader: 'babel-loader',
            options: {
                babelrc: false,
                presets: [['env', {modules: false}]]
            }
        }
    ]
}

Редактировать , 13 ноября 2017 года; обновлен фрагмент конфигурации webpack до Webpack 3 (спасибо @ x-yuri). Старый фрагмент Webpack 2:

{
    test: /\.js$/,
    exclude: ['node_modules'],
    loader: 'babel',
    query: {
        babelrc: false,
        presets: [
            ['es2015', { modules: false }],
        ],
    },
},
Edo
источник
2
В эти дни (Webpack 3) это, вероятно, выглядело бы так: module:{rules: [{test: /\.js$/, include: path.resolve('src'), loader: 'babel-loader', options: {babelrc: false, presets: [['env', {modules: false}]]}}]}( суть ). -loaderсуффикс больше не является обязательным. Попытайся избежатьexclude и предпочитайте include. Строки в include / exclude работают только при абсолютных путях. queryбыл переименован в options.
x-
Кроме того , сделать это ясно , пожалуйста , что вы не хотите {modules: false}в , .babelrcчтобы иметь возможность использовать import«S в webpack.config.babel.js.
x-
Для Webpack 4 -loaderнеобходимо добавить суффикс обратно. Webpack.js.org/migrate/3/…
kmmbvnr
12

Это действительно легко, но это не было очевидно для меня из любого из ответов, поэтому, если кто-то еще смущен, как я:

Просто добавьте .babelчасть вашего имени файла перед расширением (при условии, что у вас естьbabel-register установили его как зависимость).

Пример:

mv webpack.config.js webpack.config.babel.js
Дмитрий Минковский
источник
1
Я не использую babel, потому что сам webpack уже поддерживает синтаксис модуля ES6, и мой проект не должен быть совместимым с ES5. Это просто файл конфигурации, который все еще нужен require. Это странно, не так ли?
Кокодоко,
Вау, это интересно! Я этого не знал. Мне нужно вернуться к этому. Странно, что файл
Дмитрий Минковский
11

Вот что сработало для меня с помощью веб-пакета 4:

В package.json :

"scripts": {
    "dev": "cross-env APP_ENV=dev webpack-serve --require @babel/register"
},

"devDependencies": {
    "@babel/core": "^7.0.0-rc.1",
    "@babel/register": "^7.0.0-rc.1",
    "@babel/preset-env": "^7.0.0-rc.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2"
},

"babel": {
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": [
    "transform-es2015-modules-commonjs"
  ]
}

Вы можете четко видеть, как используется каждая зависимость, поэтому никаких сюрпризов нет.

Обратите внимание, что я использую webpack-serve--require , но если вы хотите использовать webpackкоманду вместо, замените ее на webpack --config-register. В любом случае, @babel/registerнеобходимо сделать эту работу.

И это все!

yarn dev

И вы можете использовать es6в конфиге!


Для webpack-dev-server, используйте --config-registerпараметр, который такой же, как с webpackкомандой


НОТА:

НЕТ необходимости переименовывать файл конфигурации в webpack.config.babel.js(как предполагает принятый ответ). webpack.config.jsбудет работать просто отлично.

smac89
источник
Похоже, веб-служба устарела. Есть идеи, как заставить это работать с webpack-dev-server? Я не вижу опцию --require для этого в документации: webpack.js.org/configuration/dev-server/#devserver
Кристиан Рамирес
1
@CrhistianRamirez, используйте --config-registerопцию. Также репозиторий для webpack-serveперемещен здесь: github.com/shellscape/webpack-serve
smac89
1
Прохладно! это сработало для меня. Вот как выглядит мой скрипт: webpack --config-register @babel/register --config webpack/development.config.jsмне нужно было указать --config, потому что моя конфигурация webpack находится в папке. Спасибо!
Кристиан Рамирес
6

Еще один способ - использовать аргумент require для узла:

node -r babel-register ./node_modules/webpack/bin/webpack

Нашел этот путь в электронно-реагирующем шаблоне , посмотри build-mainи build-rendererскрипты.

Дмитрий Глинянов
источник
Впечатляюще - просто смотрел на Electron и запускал отдельный сервер, твой ответ отлично помог! :)
Мэтт
6

Конфигурация для Babel 7 и Webpack 4

package.json

    ...
    "scripts": {
        "start": "webpack-dev-server --env.dev",
        "build": "webpack --env.prod",
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "@babel/register": "^7.0.0",
        "babel-loader": "^8.0.0",
        ...
        "webpack": "^4.17.2",
        "webpack-cli": "^3.1.0",
        "webpack-config-utils": "^2.3.1",
        "webpack-dev-server": "^3.1.8"

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

webpack.config.babel.js

import webpack from 'webpack';
import { resolve } from 'path';

import { getIfUtils, removeEmpty } from 'webpack-config-utils';

export default env => {
    const { ifProd, ifNotProd } = getIfUtils(env);

    return {
        mode: ifProd('production', 'development'),
        devtool: ifNotProd('cheap-module-source-map'),
        output: {
            path: resolve(__dirname, ifProd('prod', 'dev')),
            filename: 'bundle.js'
        },
keemor
источник
Это все еще не работает для меня, но IMHO выглядит самым современным и почти чистым примером (записи, связанные со свойствами класса, являются излишними для рассматриваемой задачи).
Rawpower
4

Переименовать webpack.config.jsвwebpack.config.babel.js .

Тогда в .babelrc: {"presets": ["es2015"]}

Однако, если вы хотите использовать другую конфигурацию babel для babel-cli, ваш .babelrc может выглядеть примерно так:

{
  "env": {
    "babel-cli": {
      "presets": [["es2015", {"modules": false}]]
    },
    "production": {
      "presets": ["es2015"]
    },
    "development": {
      "presets": ["es2015"]
    }
  }
}

И в package.json:

{
  "scripts": {
    "babel": "BABEL_ENV='babel-cli' babel src -d dist/babel --source-maps",
    "build-dev": "NODE_ENV='development' webpack -d --progress --profile --colors",
    ...
  },
  ...
}

Это глупо, но {"modules": false} сломает веб-пакет, если вы не используете разные envs.

Для получения дополнительной информации о .babelrc, проверьте официальные документы .

Питер Ценг
источник
4

Для TypeScript : прямо с https://webpack.js.org/configuration/configuration-languages/

npm install --save-dev typescript ts-node @types/node @types/webpack
# and, if using webpack-dev-server
npm install --save-dev @types/webpack-dev-server

затем перейдите к написанию вашего, например: webpack.config.ts

import path from 'path';
import webpack from 'webpack';

const config: webpack.Configuration = {
  mode: 'production',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

export default config;

Проверьте ссылку для получения более подробной информации, где вы можете использовать плагин, чтобы иметь отдельный файл tsconfig только для конфигурации webpack, если вы не ориентируетесь на commonjs (это требование для работы, так как он полагается на ts-node).

Марк Жуковский
источник
Спасибо за это, я не смог заставить работать модули для webpack.config.js, но был рад использовать TypeScript, который работает.
Пол Уотсон
3

Не хватает представителя, чтобы комментировать, но я хотел бы добавить для любого пользователя TypeScript аналогичное решение @Sandrik выше

У меня есть два сценария, которые я использую, указывая на конфиги веб-пакетов (файлы JS), которые содержат синтаксис ES6.

"start-dev": "./node_modules/.bin/ts-node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack/webpack.config.dev.js"

и

"build": "./node_modules/.bin/ts-node ./node_modules/webpack/bin/webpack.js --config webpack/webpack.config.js"

Дилан Стюарт
источник
2

Мой лучший подход вместе со скриптом npm

node -r babel-register ./node_modules/webpack/bin/webpack

и настройте остальные скрипты согласно вашему требованию для Babel

Фархан Ансари
источник
2

После тонны документов ...

  1. Просто установите пресет es2015 (не env !!!) и добавьте его в

    .babelrc:
    {
        "presets": [
             ["es2015", { "modules": false }]
        ]
    }
    
  2. Переименовать webpack.config.jsвwebpack.config.babel.js

Андрей Я.
источник
2

Использование Webpack 4 и Babel 7

Для настройки файла конфигурации веб-пакета для использования ES2015 требуется Babel:

Установите зависимости dev:

npm i -D  webpack \
          webpack-cli \
          webpack-dev-server \
          @babel/core \
          @babel/register \
          @babel/preset-env
npm i -D  html-webpack-plugin

Создать .babelrcфайл:

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

Создайте конфигурацию вашего веб-пакета webpack.config.babel.js:

import { resolve as _resolve } from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const config = {
  mode: 'development',
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html'
    })
  ],
  resolve: {
    modules: [_resolve(__dirname, './src'), 'node_modules']
  }
};

export default config;

Создайте свои скрипты в package.json:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },

Запустить npm run buildиnpm start .

Конфигурация webpack основана на примере проекта со следующей структурой каталогов:

├── README.md
├── package-lock.json
├── package.json
├── src
   ├── Greeter.js
   ├── index.html
   └── index.js
└── webpack.config.babel.js

Пример проекта: язык конфигурации Webpack с использованием Babel

stormwild
источник
2

Добавление es6 в веб-пакет - это трехэтапный процесс

  1. В webpack.config.js добавить

    module:{
    
              rules:[
                {
                  test: /\.js$/,
                  loader: 'babel-loader'
                }
              ]
           }
    
    1. Создайте .babel.rc и добавьте в него
{
    "presets": ["@babel/env", "@babel/react"],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
        ]
      ]
}
  1. в package.json добавить
npm install @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm install @babel/preset-react --save-dev
npm install @babel/plugin-proposal-class-properties --save-dev
npm install babel-loader --save-dev
Кирти Чатурведи
источник