Come posso usare ES6 in webpack.config.js?


210

Come usare ES6 in webpack.config? Come questo repository https://github.com/kriasoft/react-starter-kit fa?

Per esempio:

usando questo

import webpack from 'webpack';

invece di

var webpack = require('webpack');

È piuttosto una curiosità piuttosto che un'esigenza.


@ Ammetti che è una domanda. Non riesco a capirlo. Perché se uso la sintassi es6 in webpack.config ottengo errori.
Whisher,

21
La domanda è come usare es6 in webpack.config. Mi sembra chiaro. Aggiornare la mia domanda con un esempio.
Whisher,

1
Il file viene analizzato da node.js, che per impostazione predefinita non supporta es6. Ci sono flag della riga di comando per attivarlo, ma non so cosa siano. Potresti anche provare a usare io.js invece del nodo
KJ Tsanaktsidis il

@KJTsanaktsidis grazie per il suggerimento ma ho anche provato con --armony senza successo
Whisher

Non ho provato questo, ma prova a eseguire "node --harmony which webpack"
KJ Tsanaktsidis

Risposte:


230

Prova a nominare la tua configurazione come webpack.config.babel.js. Dovresti avere il registro delle babele incluso nel progetto. Esempio su React-router-bootstrap .

Webpack si affida a interpretare internamente per farlo funzionare.


4
Questo ha funzionato per me. Ho npm runquesto script: webpack --config webpack.config.babel.js.
Mat Gessel,

9
Penso che potrebbe essere in grado di prenderlo direttamente anche senza --config.
Juho Vepsäläinen,

4
Penso che dovrebbe essere aggiunto che babel-loaderè richiesto anche il modulo
lavagna a fogli mobili

7
In realtà, funziona benissimo, basta impostare i preset babele in un file .babelrc.
Pietro,

10
Ho usato questo preset specifico per farlo funzionare:echo '{ "presets": ["es2015"] }' > .babelrc
killthrush,

39

In alternativa a quanto suggerisce @bebraw, è possibile creare uno script di automazione JavaScript con sintassi ES6 +:

// tools/bundle.js

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

const bundler = webpack(webpackConfig);

bundler.run(...);

Ed eseguilo con Babele:

$ babel-node tools/bundle

PS : La chiamata al webpack tramite l'API JavaScript potrebbe essere un approccio migliore (piuttosto che chiamandolo da una riga di comando) quando è necessario implementare passaggi di compilazione più complessi. Ad esempio, quando il bundle sul lato server è pronto, avviare il server app Node.js e subito dopo l'avvio del server Node.js, avviare il server di sviluppo BrowserSync.

Guarda anche:


2
Sebbene un po 'complesso, questo è esattamente ciò che utilizza il kit di reazione. Dovrebbe essere la risposta migliore.
darkbaby123

20

Un altro approccio è quello di avere uno script NPM come questo: "webpack": "babel-node ./node_modules/webpack/bin/webpack"ed eseguirlo in questo modo: npm run webpack.


Questo non sembra funzionare quando si passa una configurazione personalizzata al webpack babel-node ./node_modules/webpack/bin/webpack --config custom-webpack.config
Abhinav Singi,

16

Ho avuto un problema a far funzionare la soluzione di @ Juho con Webpack 2. I documenti di migrazione di Webpack suggeriscono di disattivare l'analisi del modulo babel:

È importante notare che vorrai dire a Babel di non analizzare questi simboli del modulo in modo che il webpack possa usarli. Puoi farlo impostando quanto segue nelle tue opzioni .babelrc o babel-loader.

.babelrc:

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

Purtroppo, questo è in conflitto con la funzionalità automatica del registro babel. Rimozione

{ "modules": false }

dalla configurazione della babele è tornato a funzionare. Tuttavia, ciò comporterebbe la rottura del tremolio dell'albero, quindi una soluzione completa implicherebbe la sovrascrittura dei preset nelle opzioni del caricatore :

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

Modifica , 13 nov 2017; frammento di configurazione webpack aggiornato a Webpack 3 (grazie a @ x-yuri). Vecchio, frammento di Webpack 2:

{
    test: /\.js$/,
    exclude: ['node_modules'],
    loader: 'babel',
    query: {
        babelrc: false,
        presets: [
            ['es2015', { modules: false }],
        ],
    },
},

2
In questi giorni (Webpack 3), probabilmente sarebbe simile a questo: module:{rules: [{test: /\.js$/, include: path.resolve('src'), loader: 'babel-loader', options: {babelrc: false, presets: [['env', {modules: false}]]}}]}( gist ). -loaderil suffisso non è più facoltativo. Cerca di evitare excludee preferire include. Le stringhe in include / exclude funzionano solo se percorsi assoluti. queryè stato rinominato in options.
X-yuri,

Inoltre, si prega di mettere in chiaro che non si vuole {modules: false}in .babelrcessere in grado di utilizzare import's in webpack.config.babel.js.
X-yuri,

Per il Webpack 4 è -loadernecessario aggiungere il suffisso webpack.js.org/migrate/3/…
kmmbvnr

12

Questo è davvero facile, ma non è ovvio per me da nessuna delle risposte, quindi se qualcun altro è confuso come me:

Basta aggiungere .babelalla parte del tuo nome file prima dell'estensione (supponendo che tu abbia babel-registerinstallato come dipendenza).

Esempio:

mv webpack.config.js webpack.config.babel.js

1
Non uso babel perché lo stesso webpack supporta già la sintassi del modulo ES6 e il mio progetto non deve essere compatibile con ES5. È solo il file di configurazione che ha ancora bisogno require. È strano, vero?
Kokodoko,

Woah è interessante! Non lo sapevo. Dovrò rivisitare questo. Strano che il file di
configurazione debba

11

Questo è ciò che ha funzionato per me utilizzando Webpack 4:

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

Puoi vedere chiaramente come viene utilizzata ogni dipendenza, quindi nessuna sorpresa lì.

Nota Sto usando webpack-serve--require , ma se si desidera utilizzare webpackinvece il comando, sostituirlo con webpack --config-register. In entrambi i casi, @babel/registerè necessario per farlo funzionare.

E questo è tutto!

yarn dev

E sei in grado di utilizzare es6nella configurazione!


Per webpack-dev-server, usa l' --config-registeropzione che è la stessa del webpackcomando


NOTA:

Non è necessario rinominare il file di configurazione in webpack.config.babel.js(come suggerito dalla risposta accettata). webpack.config.jsfunzionerà bene.


Sembra che il servizio web sia deprecato. Qualche idea su come farlo funzionare con webpack-dev-server? Non vedo un'opzione --require per questo nei documenti: webpack.js.org/configuration/dev-server/#devserver
Crhistian Ramirez

1
@CrhistianRamirez, usa l' --config-registeropzione. Anche il repository per webpack-servespostato qui: github.com/shellscape/webpack-serve
smac89

1
Freddo! quello ha funzionato per me. Ecco come appare il mio script: webpack --config-register @babel/register --config webpack/development.config.jsho dovuto specificare --config perché la mia configurazione del webpack è in una cartella. Grazie!
Crhistian Ramirez,

6

Un altro modo è utilizzare l'argomento request per il nodo:

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

Trovato in questo modo in electron-reagire-boilerplate , guarda build-maine build-rendererscript.


Spettacolare - stavo solo guardando Electron e avviando un server separato, la tua risposta ha aiutato perfettamente! :)
Matt,

6

Configurazione per Babel 7 e 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'
        },

Questo ancora non funziona per me, ma IMHO sembra essere la data di up-to-più e quasi pulito esempio (proprietà della classe Voci correlate sono superflui per il compito a portata di mano).
rawpower

4

Rinomina webpack.config.jsin webpack.config.babel.js.

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

Tuttavia, se vuoi usare una configurazione babel diversa per babel-cli, il tuo .babelrc potrebbe assomigliare a questo:

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

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

È stupido ma {"modules": false}si romperà il webpack se non si usano envs diversi.

Per maggiori informazioni su .babelrc, consulta i documenti ufficiali .


4

Per TypeScript : direttamente da 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

quindi procedi a scrivere il tuo, ad esempio: 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;

Controlla il link per maggiori dettagli in cui puoi usare un plugin per avere un file tsconfig separato solo per la configurazione del webpack se non stai prendendo di mira commonjs (che è un req per farlo funzionare poiché si basa su ts-node).


Grazie a questo, non sono riusciti a far funzionare i moduli per webpack.config.js ma sono felice di usare TypeScript invece che funziona.
Paul Watson,

3

Non ho abbastanza rappresentante per commentare, ma volevo aggiungere per qualsiasi utente TypeScript una soluzione simile a @Sandrik sopra

Ho due script che uso puntando a configurazioni di webpack (file JS) che contengono la sintassi ES6.

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

e

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


2

Il mio approccio migliore insieme allo script npm è

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

e configura il resto degli script secondo i tuoi requisiti per Babele


2

Dopo tonnellate di documenti ...

  1. Installa il preset es2015 (non env !!!) e aggiungilo a

    .babelrc:
    {
        "presets": [
             ["es2015", { "modules": false }]
        ]
    }
    
  2. Rinominare il webpack.config.jsawebpack.config.babel.js


2

Utilizzo di Webpack 4 e Babel 7

Per impostare un file di configurazione del webpack per utilizzare ES2015 è necessario Babel:

Installa le dipendenze degli sviluppatori:

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

Crea un .babelrcfile:

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

Crea il tuo config webpack, 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;

Crea i tuoi script in package.json:

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

Corri npm run builde npm start.

La configurazione del webpack si basa su un progetto di esempio con la seguente struttura di directory:

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

Progetto di esempio: linguaggio di configurazione Webpack che utilizza Babel


2

L'aggiunta di es6 al webpack è un processo in 3 fasi

  1. In webpack.config.js aggiungere

    module:{
    
              rules:[
                {
                  test: /\.js$/,
                  loader: 'babel-loader'
                }
              ]
           }
    
    1. Crea un .babel.rc e aggiungilo al suo interno
{
    "presets": ["@babel/env", "@babel/react"],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
        ]
      ]
}
  1. in package.json aggiungere
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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.