Wie kann ich ES6 in webpack.config.js verwenden?

210

Wie verwende ich ES6 in webpack.config? Gefällt dir dieses Repo https://github.com/kriasoft/react-starter-kit ?

Zum Beispiel:

mit diesem

import webpack from 'webpack';

anstatt

var webpack = require('webpack');

Es ist eher eine Kuriosität als ein Bedürfnis.

Whisher
quelle
@Amit es ist eine Frage. Ich kann es nicht herausfinden. Denn wenn ich die es6-Syntax in webpack.config verwende, erhalte ich Fehler.
Whisher
21
Die Frage ist, wie man es6 in webpack.config verwendet. Es scheint mir klar zu sein. Ich aktualisiere meine Frage mit einem Beispiel.
Whisher
1
Die Datei wird von node.js analysiert, was es6 standardmäßig nicht unterstützt. Es gibt Befehlszeilenflags, um dies zu aktivieren, aber ich weiß nicht, was sie sind. Sie können auch versuchen, io.js anstelle von node
KJ Tsanaktsidis
@KJTsanaktsidis danke für den Hinweis, aber ich habe es auch mit - Harmonie ohne Erfolg versucht
Whisher
Ich habe das nicht versucht, aber versuche "node --harmony which webpack"
KJ Tsanaktsidis

Antworten:

230

Versuchen Sie, Ihre Konfiguration als zu benennen webpack.config.babel.js. Sie sollten ein Babel-Register im Projekt haben. Beispiel bei React-Router-Bootstrap .

Webpack ist auf interne Interpretation angewiesen , damit dies funktioniert.

Juho Vepsäläinen
quelle
4
Das hat bei mir funktioniert. Ich npm rundieses Skript : webpack --config webpack.config.babel.js.
Mat Gessel
9
Ich denke, es könnte in der Lage sein, es auch ohne direkt aufzunehmen --config.
Juho Vepsäläinen
4
Ich denke, es sollte hinzugefügt werden, dass das babel-loaderModul auch benötigt wird
Flipchart
7
Eigentlich funktioniert es gut, Sie müssen nur Ihre Babel-Voreinstellungen in einer .babelrc-Datei festlegen.
Peter
10
Ich habe diese spezielle Voreinstellung verwendet, um dies zum echo '{ "presets": ["es2015"] }' > .babelrc
Laufen
39

Alternativ zu den Vorschlägen von @bebraw können Sie ein JavaScript-Automatisierungsskript mit ES6 + -Syntax erstellen:

// tools/bundle.js

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

const bundler = webpack(webpackConfig);

bundler.run(...);

Und führe es mit babel aus:

$ babel-node tools/bundle

PS : Das Aufrufen von Webpack über die JavaScript-API ist möglicherweise ein besserer Ansatz (als das Aufrufen über eine Befehlszeile), wenn Sie komplexere Erstellungsschritte implementieren müssen. Starten Sie beispielsweise nach dem Bereitstellen des serverseitigen Bundles den Node.js-App-Server und starten Sie den BrowserSync-Dev-Server direkt nach dem Start des Node.js-Servers.

Siehe auch:

Konstantin Tarkus
quelle
2
Obwohl ein wenig komplex, ist dies genau das, was das React-Starter-Kit verwendet. Es sollte die beste Antwort sein.
darkbaby123
20

Ein anderer Ansatz besteht darin, ein npm-Skript wie das folgende zu haben: "webpack": "babel-node ./node_modules/webpack/bin/webpack"und es wie folgt auszuführen : npm run webpack.

alexb
quelle
Dies scheint nicht zu funktionieren, wenn eine benutzerdefinierte Konfiguration an das Webpack übergeben wirdbabel-node ./node_modules/webpack/bin/webpack --config custom-webpack.config
Abhinav Singi
16

Ich hatte ein Problem damit, die Lösung von @ Juho mit Webpack 2 zum Laufen zu bringen. In den Webpack-Migrationsdokumenten wird empfohlen, die Analyse von Babel-Modulen zu deaktivieren:

Es ist wichtig zu beachten, dass Sie Babel anweisen möchten, diese Modulsymbole nicht zu analysieren, damit das Webpack sie verwenden kann. Sie können dies tun, indem Sie in den Optionen .babelrc oder babel-loader Folgendes festlegen.

.babelrc:

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

Leider widerspricht dies der automatischen Babel-Register-Funktionalität. Entfernen

{ "modules": false }

Von der Babel-Konfiguration aus lief es wieder. Dies würde jedoch dazu führen, dass das Baumschütteln unterbrochen wird. Eine vollständige Lösung würde das Überschreiben der Voreinstellungen in den Ladeoptionen beinhalten :

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

Bearbeiten , 13. November 2017; aktualisiertes Webpack-Konfigurations-Snippet auf Webpack 3 (dank @ x-yuri). Altes Webpack 2-Snippet:

{
    test: /\.js$/,
    exclude: ['node_modules'],
    loader: 'babel',
    query: {
        babelrc: false,
        presets: [
            ['es2015', { modules: false }],
        ],
    },
},
Edo
quelle
2
In diesen Tagen (Webpack 3) würde es wahrscheinlich so aussehen: module:{rules: [{test: /\.js$/, include: path.resolve('src'), loader: 'babel-loader', options: {babelrc: false, presets: [['env', {modules: false}]]}}]}( Kern ). -loaderSuffix nicht mehr optional. Versuche es zu vermeiden excludeund zu bevorzugen include. Zeichenfolgen in Einschluss / Ausschluss funktionieren nur bei absoluten Pfaden. querywurde umbenannt in options.
X-Yuri
Stellen Sie außerdem bitte klar, dass Sie nicht {modules: false}in .babelrcder Lage sein möchten import, s in zu verwenden webpack.config.babel.js.
X-Yuri
Für Webpack 4 muss das -loaderSuffix zurück hinzugefügt werden. Webpack.js.org/migrate/3/…
kmmbvnr
12

Das ist wirklich einfach, aber aus keiner der Antworten war es mir ersichtlich. Wenn also jemand wie ich verwirrt ist:

Fügen Sie einfach .babelden Teil Ihres Dateinamens vor der Erweiterung hinzu (vorausgesetzt, Sie habenbabel-register als Abhängigkeit installiert).

Beispiel:

mv webpack.config.js webpack.config.babel.js
Dmitry Minkovsky
quelle
1
Ich verwende babel nicht, da das Webpack selbst bereits die ES6-Modulsyntax unterstützt und mein Projekt nicht mit ES5 kompatibel sein muss. Es ist nur die Konfigurationsdatei, die noch benötigt wird require. Das ist komisch, nicht wahr?
Kokodoko
Woah das ist interessant! Das wusste ich nicht. Ich muss das noch einmal überdenken. Seltsam, dass die Konfigurationsdatei noch benötigt
Dmitry
11

Dies hat bei mir mit Webpack 4 funktioniert:

In 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"
  ]
}

Sie können deutlich sehen, wie jede Abhängigkeit verwendet wird, also keine Überraschungen.

Hinweis Ich verwende webpack-serve--require , aber wenn Sie webpackstattdessen den Befehl verwenden möchten , ersetzen Sie ihn durch webpack --config-register. In beiden Fällen,@babel/register ist dies erforderlich, damit dies funktioniert.

Und das ist es!

yarn dev

Und Sie können es6in der Konfiguration verwenden!


Für webpack-dev-serverdie Verwendung --config-registerOption , die die gleichen wie bei dem ist webpackBefehl


HINWEIS:

KEINE Notwendigkeit, die Konfigurationsdatei in umzubenennen webpack.config.babel.js(wie in der akzeptierten Antwort vorgeschlagen). webpack.config.jswird gut funktionieren.

smac89
quelle
Es sieht so aus, als wäre Web-Serve veraltet. Haben Sie eine Idee, wie dies mit dem Webpack-Dev-Server funktioniert? Ich sehe keine --require-Option dafür in den Dokumenten: webpack.js.org/configuration/dev-server/#devserver
Crhistian Ramirez
1
@CrhistianRamirez, benutze die --config-registerOption. Auch das Repo für webpack-servehierher gezogen: github.com/shellscape/webpack-serve
smac89
1
Cool! das hat bei mir funktioniert. So sieht mein Skript aus: webpack --config-register @babel/register --config webpack/development.config.jsIch musste --config angeben, da sich meine Webpack-Konfiguration in einem Ordner befindet. Danke dir!
Crhistian Ramirez
6

Eine weitere Möglichkeit besteht darin, das Argument require für node zu verwenden:

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

Gefunden auf diese Weise in Elektron-React-Boilerplate , Blick build-mainund build-rendererSkripte.

Dmitry Glinyanov
quelle
Spektakulär - Ich habe mir nur Electron angesehen und einen separaten Server gestartet. Ihre Antwort hat perfekt geholfen! :)
Matt
6

Konfiguration für 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
quelle
Dies funktioniert bei mir immer noch nicht, aber IMHO scheint das aktuellste und fast sauberste Beispiel zu sein (Einträge in Bezug auf Klasseneigenschaften sind für die jeweilige Aufgabe überflüssig).
Rawpower
4

Umbenennen webpack.config.jsin webpack.config.babel.js.

Dann in .babelrc: {"presets": ["es2015"]}

Wenn Sie jedoch eine andere babel-Konfiguration für babel-cli verwenden möchten, sieht Ihre .babelrc möglicherweise folgendermaßen aus:

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

Und in 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",
    ...
  },
  ...
}

Es ist dumm, aber das {"modules": false}Webpack wird kaputt gehen, wenn Sie keine anderen Envs verwenden.

Weitere Informationen zu .babelrc finden Sie in den offiziellen Dokumenten .

Peter Tseng
quelle
4

Für TypeScript : direkt von 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

Schreiben Sie dann Ihre, z. B.: 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;

Überprüfen Sie den Link für weitere Details, wo Sie ein Plugin verwenden können, um eine separate tsconfig-Datei nur für die Webpack-Konfiguration zu haben, wenn Sie nicht auf commonjs abzielen (dies ist eine Voraussetzung dafür, dass dies funktioniert, da es auf ts-node basiert).

Mark Zhukovsky
quelle
Vielen Dank dafür, ich konnte keine Module für webpack.config.js zum Laufen bringen, aber ich bin froh, stattdessen TypeScript zu verwenden, was funktioniert.
Paul Watson
3

Ich habe nicht genug Repräsentanten, um Kommentare abzugeben, aber ich wollte für alle TypeScript-Benutzer eine ähnliche Lösung wie oben für @Sandrik hinzufügen

Ich habe zwei Skripte, die auf Webpack-Konfigurationen (JS-Dateien) verweisen, die ES6-Syntax enthalten.

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

und

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

Dylan Stewart
quelle
2

Mein bester Ansatz zusammen mit dem npm-Skript ist

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

und konfigurieren Sie die restlichen Skripte gemäß Ihren Anforderungen für Babel

Farhan Ansari
quelle
2

Nach Tonnen von Dokumenten ...

  1. Installieren Sie einfach die Voreinstellung es2015 (nicht env !!!) und fügen Sie sie hinzu

    .babelrc:
    {
        "presets": [
             ["es2015", { "modules": false }]
        ]
    }
    
  2. Benennen Sie Ihre webpack.config.jsin umwebpack.config.babel.js

Andrew I.
quelle
2

Verwenden von Webpack 4 und Babel 7

Zum Einrichten einer Webpack-Konfigurationsdatei für die Verwendung von ES2015 ist Babel erforderlich:

Installieren Sie Entwicklungsabhängigkeiten:

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

Erstellen Sie eine .babelrcDatei:

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

Erstellen Sie Ihre Webpack-Konfiguration 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;

Erstellen Sie Ihre Skripte in package.json:

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

Führen Sie npm run buildund npm start.

Die Webpack-Konfiguration basiert auf einem Beispielprojekt mit der folgenden Verzeichnisstruktur:

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

Beispielprojekt: Webpack-Konfigurationssprache mit Babel

Stormwild
quelle
2

Das Hinzufügen von es6 zum Webpack erfolgt in drei Schritten

  1. In webpack.config.js hinzufügen

    module:{
    
              rules:[
                {
                  test: /\.js$/,
                  loader: 'babel-loader'
                }
              ]
           }
    
    1. Erstellen Sie eine .babel.rc und fügen Sie sie hinzu
{
    "presets": ["@babel/env", "@babel/react"],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
        ]
      ]
}
  1. in package.json hinzufügen
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
Kirti Chaturvedi
quelle