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…
-
Installeer de es2015-voorinstelling (niet env !!!) en voeg deze toe aan
.babelrc: { "presets": [ ["es2015", { "modules": false }] ] }
-
Hernoem uw
webpack.config.js
inwebpack.config.babel.js
Antwoord 7
Het toevoegen van es6 aan webpack is een proces van 3 stappen
-
In webpack.config.jsvoeg
. toe
module:{ rules:[ { test: /\.js$/, loader: 'babel-loader' } ] }
- Maak een .babel.rcen voeg erin toe
{ "presets": ["@babel/env", "@babel/react"], "plugins": [ [ "@babel/plugin-proposal-class-properties", ] ] }
- 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 babel
of esm
.
https://github.com/webpack/webpack-cli/issues/282
Maar u kunt webpack -r esm @babel/register
uitvoeren