如何在webpack中使用ES6。配置吗? 就像这个回购 https://github.com/kriasoft/react-starter-kit 呢?

例如:

使用这个

import webpack from 'webpack';

而不是

var webpack = require('webpack');

与其说这是一种需求,不如说是一种好奇心。


当前回答

另一种方法是这样写一个npm脚本:"webpack": "babel-node ./node_modules/webpack/bin/webpack",然后像这样运行:

其他回答

试着将你的配置命名为webpack.config.babel.js。你应该在项目中包含通音寄存器。在react-router-bootstrap的例子。

Webpack依赖于内部的解释来实现此工作。

这真的很简单,但从任何答案中我都看不出来,所以如果有人和我一样困惑:

只需将.babel附加到你的文件名扩展名之前的部分(假设你已经安装了babel寄存器作为依赖项)。

例子:

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

编辑:截至2021年2月

https://github.com/webpack/webpack-cli/pull/2381


你不能。你必须把它转换成CommonJS,要么用babel要么用esm。

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

但是你可以运行webpack -r esm @babel/register

作为@bebraw建议的替代方案,您可以使用ES6+语法创建一个JavaScript自动化脚本:

// tools/bundle.js

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

const bundler = webpack(webpackConfig);

bundler.run(...);

用巴别塔来执行:

$ babel-node tools/bundle

附注:当你需要实现更复杂的构建步骤时,通过JavaScript API调用webpack可能是一个更好的方法(比通过命令行调用它)。例如,在服务器端bundle准备好后,启动Node.js应用服务器,在Node.js服务器启动后,启动BrowserSync开发服务器。

参见:

React Starter Kit(包。Json /scripts, tools/bundle.js, tools/webpack.config.js) React静态样板(run.js, webpack.config.js,节点运行) 你可能不需要Gulp.js

看了无数的文件之后……

只需安装es2015预置(不是env !!)并将其添加到 .babelrc: { “预设”:( ["es2015", {"modules": false}] ] } 将webpack.config.js重命名为webpack.config.babel.js