如何在webpack中使用ES6。配置吗? 就像这个回购 https://github.com/kriasoft/react-starter-kit 呢?
例如:
使用这个
import webpack from 'webpack';
而不是
var webpack = require('webpack');
与其说这是一种需求,不如说是一种好奇心。
如何在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