Hoe kan ik ES6 gebruiken in webpack.config.js?

Hoe gebruik ik ES6 in webpack.config?
Vind deze repo leuk
https://github.com/kriasoft/react-starter-kit
doet ?

Bijvoorbeeld:

dit gebruiken

import webpack from 'webpack';

in plaats van

var webpack = require('webpack');

Het is eerder een curiositeit dan een noodzaak.

Antwoord 1, autoriteit 100%

Probeer uw configuratie een naam te geven als webpack.config.babel.js. U moet babel-registerin het project hebben opgenomen. Voorbeeld op react-router-bootstrap.

Webpack vertrouwt op interpretatieintern om dit te laten werken.

Antwoord 2, autoriteit 18%

Als alternatief voor wat @bebraw suggereert, kun je een JavaScript-automatiseringsscript maken met ES6+-syntaxis:

// tools/bundle.js
import webpack from 'webpack';
import webpackConfig from './webpack.config.js'; // <-- Contains ES6+
const bundler = webpack(webpackConfig);
bundler.run(...);

En voer het uit met babe:

$ babel-node tools/bundle

P.S.: Webpack aanroepen via JavaScript API is misschien een betere benadering (dan door het via een opdrachtregel aan te roepen) wanneer u complexere bouwstappen moet implementeren. bijv. nadat de server-side bundel gereed is, start u de Node.js app-server, en direct nadat de Node.js-server is gestart, start u BrowserSync dev-server.

Zie ook:

• React Starter Kit(package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• React Static Boilerplate(run.js, webpack.config.js, node run)
• Je hebt Gulp.js misschien niet nodig

Antwoord 3, autoriteit 8%

Een andere benadering is om een ​​npm-script te gebruiken zoals dit: "webpack": "babel-node ./node_modules/webpack/bin/webpack", en voer het als volgt uit: npm run webpack.

Antwoord 4, autoriteit 7%

Ik had een probleem om de oplossing van @Juho te laten werken met Webpack 2. De Webpack-migratiedocumentenraden u aan de ontleding van de babel-module uit te schakelen:

Het is belangrijk op te merken dat je Babel wilt vertellen dat hij niet mag ontleden
deze modulesymbolen zodat webpack ze kan gebruiken. U kunt dit doen door
het volgende instellen in uw .babelrc of babel-loader opties.

.babelrc:

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

Helaas is dit in strijd met de automatische babel-registerfunctionaliteit.

. verwijderen

{ "modules": false }

van de babel-configuratie kreeg de boel weer draaiende. Dit zou echter resulteren in het breken van tree-shaking, dus een complete oplossing zou inhouden dat de voorinstellingen in de laderopties:

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

Bewerken, 13 november 2017; webpack-configuratiefragment bijgewerkt naar Webpack 3 (met dank aan @x-yuri). Oud, Webpack 2-fragment:

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

Antwoord 5

Mijn beste aanpak samen met het npm-script is

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

en configureer de rest van de scripts volgens uw vereisten voor Babel

Antwoord 6

Na een heleboel documenten…

1. Installeer de es2015-voorinstelling (niet env !!!) en voeg deze toe aan

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

2. Hernoem uw webpack.config.jsin webpack.config.babel.js

Antwoord 7

Het toevoegen van es6 aan webpack is een proces van 3 stappen

1. In webpack.config.jsvoeg

   . toe

   module:{
             rules:[
               {
                 test: /\.js$/,
                 loader: 'babel-loader'
               }
             ]
          }
   

   2. Maak een .babel.rcen voeg erin toe

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

3. in package.jsonvoeg

. toe

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

Antwoord 8

Dat kan niet. Je moet het converteren naar CommonJS, ofwel met babelof esm.

https://github.com/webpack/webpack-cli/issues/282

Maar u kunt webpack -r esm @babel/register

uitvoeren