如何在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
其他回答
我在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 }],
],
},
},
这真的很简单,但从任何答案中我都看不出来,所以如果有人和我一样困惑:
只需将.babel附加到你的文件名扩展名之前的部分(假设你已经安装了babel寄存器作为依赖项)。
例子:
mv webpack.config.js webpack.config.babel.js
Babel 7和Webpack 4的配置
package.json
...
"scripts": {
"start": "webpack-dev-server --env.dev",
"build": "webpack --env.prod",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-loader": "^8.0.0",
...
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-config-utils": "^2.3.1",
"webpack-dev-server": "^3.1.8"
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
webpack.config.babel.js
import webpack from 'webpack';
import { resolve } from 'path';
import { getIfUtils, removeEmpty } from 'webpack-config-utils';
export default env => {
const { ifProd, ifNotProd } = getIfUtils(env);
return {
mode: ifProd('production', 'development'),
devtool: ifNotProd('cheap-module-source-map'),
output: {
path: resolve(__dirname, ifProd('prod', 'dev')),
filename: 'bundle.js'
},
使用Webpack 4和Babel 7
要设置webpack配置文件以使用ES2015需要Babel:
安装开发依赖项:
npm i -D webpack \
webpack-cli \
webpack-dev-server \
@babel/core \
@babel/register \
@babel/preset-env
npm i -D html-webpack-plugin
创建一个.babelrc文件:
{
"presets": ["@babel/preset-env"]
}
创建webpack配置,webpack.config.babel.js:
import { resolve as _resolve } from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const config = {
mode: 'development',
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html'
})
],
resolve: {
modules: [_resolve(__dirname, './src'), 'node_modules']
}
};
export default config;
在package.json中创建脚本:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open"
},
运行npm Run build和npm start。
webpack配置基于以下目录结构的示例项目:
├── README.md
├── package-lock.json
├── package.json
├── src
│ ├── Greeter.js
│ ├── index.html
│ └── index.js
└── webpack.config.babel.js
示例项目:Webpack配置语言使用Babel
我最好的方法与npm脚本是
node -r babel-register ./node_modules/webpack/bin/webpack
并根据您对Babel的需求配置其余脚本