如何在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');
与其说这是一种需求,不如说是一种好奇心。
当前回答
没有足够的代表来评论,但我想为任何TypeScript用户添加一个类似于上面@Sandrik的解决方案
我有两个脚本,我使用指向webpack配置(JS文件),包含ES6语法。
"start-dev": "./node_modules/.bin/ts-node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js——config. /webpack/webpack.config.dev.js"
and
"./node_modules/.bin/ts-node ./node_modules/webpack/bin/webpack.js——config webpack/webpack.config.js"
其他回答
这就是我使用webpack 4时的效果:
在package.json:
"scripts": {
"dev": "cross-env APP_ENV=dev webpack-serve --require @babel/register"
},
"devDependencies": {
"@babel/core": "^7.0.0-rc.1",
"@babel/register": "^7.0.0-rc.1",
"@babel/preset-env": "^7.0.0-rc.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2"
},
"babel": {
"presets": [
["@babel/preset-env", {
"targets": {
"node": "current"
}
}]
],
"plugins": [
"transform-es2015-modules-commonjs"
]
}
您可以清楚地看到每个依赖项是如何使用的,所以没有什么奇怪的。
注意我使用的是webpack-serve——require,但如果你想使用webpack命令,请将其替换为webpack——config-register。在任何一种情况下,都需要@babel/register来实现此工作。
就是这样!
纱线开发
你可以在配置中使用es6 !
对于webpack-dev-server,使用与webpack命令相同的——config-register选项
注意:
不需要将配置文件重命名为webpack.config.babel.js(由已接受的答案所建议)。Webpack.config.js可以正常工作。
将webpack.config.js重命名为webpack.config.babel.js。
然后在.babelrc: {"presets": ["es2015"]}
然而,如果你想为babel-cli使用不同的babel配置,你的.babelrc可能看起来像这样:
{
"env": {
"babel-cli": {
"presets": [["es2015", {"modules": false}]]
},
"production": {
"presets": ["es2015"]
},
"development": {
"presets": ["es2015"]
}
}
}
在package.json中:
{
"scripts": {
"babel": "BABEL_ENV='babel-cli' babel src -d dist/babel --source-maps",
"build-dev": "NODE_ENV='development' webpack -d --progress --profile --colors",
...
},
...
}
这是愚蠢的,但{"modules": false}将破坏webpack如果你不使用不同的环境。
有关.babelrc的更多信息,请查看官方文档。
另一种方法是这样写一个npm脚本:"webpack": "babel-node ./node_modules/webpack/bin/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
编辑:截至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