如何在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');
与其说这是一种需求,不如说是一种好奇心。
当前回答
还有一种方法是为node使用require参数:
Node -r babel-register ./node_modules/webpack/bin/webpack . xml
在electron-react-boilerplate中可以找到这种方法,看看build-main和build-renderer脚本。
其他回答
试着将你的配置命名为webpack.config.babel.js。你应该在项目中包含通音寄存器。在react-router-bootstrap的例子。
Webpack依赖于内部的解释来实现此工作。
作为@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
还有一种方法是为node使用require参数:
Node -r babel-register ./node_modules/webpack/bin/webpack . xml
在electron-react-boilerplate中可以找到这种方法,看看build-main和build-renderer脚本。
我最好的方法与npm脚本是
node -r babel-register ./node_modules/webpack/bin/webpack
并根据您对Babel的需求配置其余脚本
我在Webpack 2上运行@Juho的解决方案时遇到了一个问题。Webpack迁移文档建议你打开babel模块解析:
重要的是要注意,您将希望告诉Babel不要解析 这些模块符号,以便webpack可以使用它们。你可以通过 在.babelrc或babel加载器选项中设置以下内容。 .babelrc:
{
"presets": [
["es2015", { "modules": false }]
]
}
遗憾的是,这与自动巴别寄存器功能相冲突。删除
{ "modules": false }
巴别塔的配置让一切重新运转起来。然而,这将导致破坏摇树,所以一个完整的解决方案将涉及覆盖加载器选项中的预设:
module: {
rules: [
{
test: /\.js$/,
include: path.resolve('src'),
loader: 'babel-loader',
options: {
babelrc: false,
presets: [['env', {modules: false}]]
}
}
]
}
编辑,2017年11月13日;更新webpack配置片段到webpack 3(感谢@x-yuri)。旧的Webpack 2代码片段:
{
test: /\.js$/,
exclude: ['node_modules'],
loader: 'babel',
query: {
babelrc: false,
presets: [
['es2015', { modules: false }],
],
},
},