Jak mogę używać ES6 w webpack.config.js?

210

Jak korzystać z ES6 w webpack.config? Podobnie jak w przypadku tego repo https://github.com/kriasoft/react-starter-kit ?

Na przykład:

używając tego

import webpack from 'webpack';

zamiast

var webpack = require('webpack');

To raczej ciekawość niż potrzeba.

Whisher
źródło
@ Przyznaj, że to pytanie. Nie mogę tego rozgryźć. Ponieważ jeśli użyję składni es6 w webpack.config, dostaję błędy.
Whisher,
21
Pytanie brzmi: jak używać es6 w webpack.config. Wydaje mi się jasne. Aktualizuję moje pytanie za pomocą przykładu.
Whisher,
1
Plik jest analizowany przez node.js, który domyślnie nie obsługuje ES6. Istnieją flagi linii poleceń, aby to włączyć, ale nie wiem, co to są. Możesz także spróbować użyć io.js zamiast węzła
KJ Tsanaktsidis
@KJTsanaktsidis dziękuję za podpowiedź, ale próbowałem też z - Harmonia bez powodzenia
Whisher
Nie próbowałem tego, ale spróbuj uruchomić „node --harmony which webpack
KJ Tsanaktsidis

Odpowiedzi:

230

Spróbuj nazwać swoją konfigurację jako webpack.config.babel.js. Powinieneś mieć rejestr babel włączony do projektu. Przykład w React-Router-Bootstrap .

Aby to działało, Webpack polega na wewnętrznym tłumaczeniu .

Juho Vepsäläinen
źródło
4
To zadziałało dla mnie. I npm runten skrypt: webpack --config webpack.config.babel.js.
Mat Gessel,
9
Myślę, że może to być w stanie odebrać bezpośrednio, nawet bez --config.
Juho Vepsäläinen
4
Myślę, że należy dodać, że babel-loadermoduł jest również wymagany
flipchart
7
Właściwie to działa dobrze, wystarczy ustawić swoje ustawienia wstępne babel w pliku .babelrc.
Piotr
10
Użyłem tego konkretnego ustawienia, aby to zadziałało:echo '{ "presets": ["es2015"] }' > .babelrc
killthrush,
39

Jako alternatywę dla sugestii @bebraw możesz utworzyć skrypt automatyzacji JavaScript ze składnią ES6 +:

// tools/bundle.js

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

const bundler = webpack(webpackConfig);

bundler.run(...);

I wykonaj to za pomocą babel:

$ babel-node tools/bundle

PS : Wywoływanie webpacka za pomocą JavaScript API może być lepszym podejściem (niż wywoływanie go z wiersza poleceń), gdy trzeba wdrożyć bardziej złożone kroki kompilacji. Np. Po przygotowaniu pakietu po stronie serwera uruchom serwer aplikacji Node.js, a zaraz po uruchomieniu serwera Node.js uruchom serwer dev BrowserSync.

Zobacz też:

Konstantin Tarkus
źródło
2
Chociaż jest to trochę skomplikowane, dokładnie tego używa zestaw React-Starter. To powinna być najlepsza odpowiedź.
darkbaby123
20

Innym rozwiązaniem jest mieć skrypt npm takiego: "webpack": "babel-node ./node_modules/webpack/bin/webpack"i uruchomić go tak: npm run webpack.

alexb
źródło
Wydaje się, że to nie działa, gdy przekazujemy niestandardową konfigurację do webpacka babel-node ./node_modules/webpack/bin/webpack --config custom-webpack.config
Abhinav Singi,
16

Miałem problem z uruchomieniem rozwiązania @ Juho w pakiecie Webpack 2. Dokumenty dotyczące migracji pakietu Webpack sugerują wyłączenie analizy składni modułu babel:

Ważne jest, aby pamiętać, że będziesz chciał powiedzieć Babelowi, aby nie analizował tych symboli modułów, aby webpack mógł ich użyć. Możesz to zrobić, ustawiając następujące opcje w opcjach .babelrc lub babel-loader.

.babelrc:

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

Niestety koliduje to z funkcją automatycznego rejestru babel. Usuwanie

{ "modules": false }

z konfiguracji Babel znów działało. Spowodowałoby to jednak przerwanie wstrząsania drzewem, więc kompletne rozwiązanie wymagałoby zastąpienia ustawień wstępnych w opcjach modułu ładującego :

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

Edycja , 13 listopada 2017 r .; zaktualizowany fragment konfiguracji webpacka do Webpack 3 (dzięki @ x-yuri). Stary fragment kodu pakietu Webpack 2:

{
    test: /\.js$/,
    exclude: ['node_modules'],
    loader: 'babel',
    query: {
        babelrc: false,
        presets: [
            ['es2015', { modules: false }],
        ],
    },
},
Edo
źródło
2
Obecnie (Webpack 3) prawdopodobnie wyglądałoby to tak: module:{rules: [{test: /\.js$/, include: path.resolve('src'), loader: 'babel-loader', options: {babelrc: false, presets: [['env', {modules: false}]]}}]}( gist ). -loadersufiks nie jest już opcjonalny. Staraj się unikać excludei wolisz include. Ciągi znaków włączaj / wyłączaj działają tylko wtedy, gdy ścieżki bezwzględne. queryzostał przemianowany na options.
x-yuri
Ponadto, jasno, proszę, że nie chce {modules: false}się .babelrc, aby móc korzystać z import„sw webpack.config.babel.js.
x-yuri
W przypadku pakietu Webpack 4 -loadernależy dodać przyrostek webpack.js.org/migrate/3/…
kmmbvnr
12

To jest naprawdę łatwe, ale nie było dla mnie oczywiste z żadnej z odpowiedzi, więc jeśli ktoś jest zdezorientowany jak ja:

Po prostu dołącz .babeldo części nazwy pliku przed rozszerzeniem (zakładając, że babel-registerzainstalowałeś jako zależność).

Przykład:

mv webpack.config.js webpack.config.babel.js
Dmitrij Minkowski
źródło
1
Nie używam babel, ponieważ sam webpack już obsługuje składnię modułu ES6, a mój projekt nie musi być zgodny z ES5. To tylko plik konfiguracyjny, który wciąż potrzebuje require. To dziwne, prawda?
Kokodoko
Woah, to interesujące! Nie wiedziałem tego Będę musiał to odwiedzić ponownie. Dziwne, że plik konfiguracyjny nadal wymaga
Dmitry Minkovsky,
11

Oto, co działało dla mnie przy użyciu webpack 4:

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

Możesz wyraźnie zobaczyć, w jaki sposób używana jest każda zależność, więc nie ma tam niespodzianek.

Uwaga: Używam webpack-serve--require , ale jeśli webpackzamiast tego chcesz użyć polecenia, zamień je na webpack --config-register. W obu przypadkach @babel/registerjest to konieczne, aby to zadziałało.

I to wszystko!

yarn dev

I możesz używać es6w konfiguracji!


Dla webpack-dev-serverużyj --config-registeropcji, która jest taka sama jak w przypadku webpackpolecenia


UWAGA:

NIE trzeba zmieniać nazwy pliku konfiguracyjnego na webpack.config.babel.js(jak sugeruje zaakceptowana odpowiedź). webpack.config.jsbędzie działać dobrze.

smac89
źródło
Wygląda na to, że serwer WWW jest przestarzały. Wiesz, jak to zrobić z webpack-dev-server? Nie widzę opcji --require w dokumentacji: webpack.js.org/configuration/dev-server/#devserver
Crhistian Ramirez
1
@CrhistianRamirez, użyj --config-registeropcji. Również repozytorium webpack-serveprzeniesione tutaj: github.com/shellscape/webpack-serve
smac89
1
Chłodny! to działało dla mnie. Oto, jak wygląda mój skrypt: webpack --config-register @babel/register --config webpack/development.config.jsmusiałem podać specyfikację --config, ponieważ moja konfiguracja webpacka znajduje się w folderze. Dziękuję Ci!
Crhistian Ramirez
6

Jeszcze jednym sposobem jest użycie argumentu wymaganego dla węzła:

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

Znalezione w ten sposób w płytce reagującej elektronowo , spojrzeniu build-maini build-rendererskryptach.

Dmitrij Glinyanov
źródło
Spektakularne - właśnie patrzyłem na Electrona i uruchamialiśmy osobny serwer, twoja odpowiedź pomogła idealnie! :)
Matt
6

Konfiguracja Babel 7 i Webpack 4

pakiet.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'
        },
klucz
źródło
Dla mnie to nadal nie działa, ale IMHO wydaje się być najbardziej aktualnym i prawie najczystszym przykładem (wpisy dotyczące właściwości klas są zbędne dla danego zadania).
rawpower
4

Zmień nazwę webpack.config.jsna webpack.config.babel.js.

Następnie w .babelrc: {"presets": ["es2015"]}

Jeśli jednak chcesz użyć innej konfiguracji babel dla babel-cli, twój .babelrc może wyglądać mniej więcej tak:

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

A w pakiecie.json:

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

To głupie, ale {"modules": false}zepsuje paczkę, jeśli nie użyjesz różnych env.

Aby uzyskać więcej informacji o .babelrc, sprawdź oficjalne dokumenty .

Peter Tseng
źródło
4

W przypadku TypeScript : prosto z 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

następnie kontynuuj pisanie np.: 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;

Sprawdź link, aby uzyskać więcej informacji, w których możesz użyć wtyczki, aby mieć osobny plik tsconfig tylko dla konfiguracji webpacka, jeśli nie celujesz w commonjs (co jest wymagane, aby działało, ponieważ opiera się na ts-node).

Mark Żukowski
źródło
Dzięki za to, nie mogłem zmusić modułów do pracy dla webpack.config.js, ale chętnie użyłem zamiast tego TypeScript, który działa.
Paul Watson
3

Nie mam wystarczającej liczby przedstawicieli do skomentowania, ale chciałem dodać dla każdego użytkownika TypeScript podobne rozwiązanie do @Sandrik powyżej

Mam dwa skrypty, których używam, wskazując na konfiguracje webpack (pliki JS), które zawierają składnię ES6.

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

i

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

Dylan Stewart
źródło
2

Moje najlepsze podejście wraz ze skryptem npm to

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

i skonfiguruj pozostałe skrypty zgodnie z wymaganiami dla Babel

Farhan Ansari
źródło
2

Po tonach dokumentów ...

  1. Wystarczy zainstalować preset es2015 (nie env !!!) i dodać go do

    .babelrc:
    {
        "presets": [
             ["es2015", { "modules": false }]
        ]
    }
    
  2. Zmień nazwę webpack.config.jsnawebpack.config.babel.js

Andrzej I.
źródło
2

Korzystanie z Webpack 4 i Babel 7

Aby skonfigurować plik konfiguracyjny pakietu WWW do używania ES2015, wymagana jest Babel:

Zainstaluj zależności programistyczne:

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

Utwórz .babelrcplik:

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

Utwórz konfigurację pakietu internetowego 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;

Utwórz swoje skrypty w package.json:

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

Uruchom npm run buildi npm start.

Konfiguracja webpacka oparta jest na przykładowym projekcie o następującej strukturze katalogów:

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

Przykładowy projekt: Webpack Configuration Language using Babel

Stormwild
źródło
2

Dodanie es6 do webpacka to 3-etapowy proces

  1. W pliku webpack.config.js dodaj

    module:{
    
              rules:[
                {
                  test: /\.js$/,
                  loader: 'babel-loader'
                }
              ]
           }
    
    1. Utwórz plik .babel.rc i dodaj go
{
    "presets": ["@babel/env", "@babel/react"],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
        ]
      ]
}
  1. w pakiecie.json dodaj
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
źródło