如何在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');
与其说这是一种需求,不如说是一种好奇心。
当前回答
将es6添加到webpack需要3个步骤
在webpack.config.js中添加 模块:{ 规则:[ { 测试:/ \ . js /美元, 装载机:“babel-loader” } ] } 创建一个。babel。Rc,然后加进去
{ "presets": ["@babel/env", "@babel/react"], “插件”:( [ “@babel / plugin-proposal-class-properties”, ] ] }
在包中。json添加
NPM install @babel/core NPM install @babel/preset-env——save-dev NPM install @babel/preset-react——save-dev NPM install @babel/plugin-proposal-class-properties NPM安装babel-loader——save-dev
其他回答
这真的很简单,但从任何答案中我都看不出来,所以如果有人和我一样困惑:
只需将.babel附加到你的文件名扩展名之前的部分(假设你已经安装了babel寄存器作为依赖项)。
例子:
mv webpack.config.js webpack.config.babel.js
看了无数的文件之后……
只需安装es2015预置(不是env !!)并将其添加到 .babelrc: { “预设”:( ["es2015", {"modules": false}] ] } 将webpack.config.js重命名为webpack.config.babel.js
将es6添加到webpack需要3个步骤
在webpack.config.js中添加 模块:{ 规则:[ { 测试:/ \ . js /美元, 装载机:“babel-loader” } ] } 创建一个。babel。Rc,然后加进去
{ "presets": ["@babel/env", "@babel/react"], “插件”:( [ “@babel / plugin-proposal-class-properties”, ] ] }
在包中。json添加
NPM install @babel/core NPM install @babel/preset-env——save-dev NPM install @babel/preset-react——save-dev NPM install @babel/plugin-proposal-class-properties NPM安装babel-loader——save-dev
编辑:截至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
还有一种方法是为node使用require参数:
Node -r babel-register ./node_modules/webpack/bin/webpack . xml
在electron-react-boilerplate中可以找到这种方法,看看build-main和build-renderer脚本。