我目前正在使用不久前刚刚发布的 babel 7 的 webpack 4。每当我尝试在我的项目上运行带有 babel 的最新 webpack 时，我目前在使用插件@babel/plugin-transform-runtime时都会收到以下错误：
Invalid configuration object. Webpack has been initialised using a configuration object that does not match
the API schema.
- configuration.plugins[0] should be one of these:
object { apply, … } | function
-> Plugin of type object or instanceof Function
Details:
* configuration.plugins[0] should be an object.
-> Plugin instance
* configuration.plugins[0] should be an instance of function
-> Function acting as plugin
- configuration.plugins[1] should be one of these:
object { apply, … } | function
-> Plugin of type object or instanceof Function
Details:
* configuration.plugins[1] misses the property 'apply'.
function
-> The run point of the plugin, required method.
* configuration.plugins[1] misses the property 'apply'.
function
-> The run point of the plugin, required method.
* configuration.plugins[1] should be an instance of function
-> Function acting as plugin
根据 https://babeljs.io/docs/en/babel-plugin-transform-runtime/中的文档，这应该以以下示例配置作为 .babelrc 为例(在我的 webpack.config 中修改它.js以将 corejs 转换为 true(
{
"plugins": [
["@babel/plugin-transform-runtime", {
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}]
]
}
webpack.config.js
var webpack = require('webpack');
var fiber = require('fibers');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: [
'@babel/polyfill',
'./src/jsx/app'
],
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
mode: 'development',
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx'],
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'main',
test: /.css$/,
chunks: 'all',
enforce: true
}
}
}
},
module: {
rules: [
{
test: /.(jsx|js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
{
'useBuiltIns': 'entry',
'modules': 'false'
},
'@babel/preset-env',
'@babel/preset-react'
],
plugins: [
require('@babel/plugin-syntax-dynamic-import'),
require('@babel/plugin-proposal-object-rest-spread')
]
}
}
},
{
test: /.(scss|css)$/,
exclude: /node_modules/,
use: [
{
loader: this.mode === 'development' ? MiniCssExtractPlugin.loader : 'style-loader',
}, {
loader: 'css-loader',
options: {
sourceMap: true
}
}, {
loader: 'resolve-url-loader',
options: {
sourceMap: true,
keepQuery: true,
debug: this.mode === 'development'
}
}, {
loader: 'sass-loader',
options: {
outFile: 'src/style.css',
implementation: require('dart-sass'),
fiber: fiber,
sourceMap: true,
sourceComments: true,
sourceMapContents: true,
outputStyle: 'compressed',
includePaths: [
'node_modules/@fortawesome/fontawesome-pro/scss',
'node_modules/foundation-sites/scss',
'node_modules/motion-ui/src',
'node_modules/react-dates',
'node_modules/slick-carousel/slick',
'src/scss'
]
}
}
]
}
]
},
plugins: [
'@babel/plugin-transform-runtime', {
'corejs': true
},
new MiniCssExtractPlugin({
filename: this.mode === 'development' ? '[name].css' : '[name].[hash].css',
chunkFilename: this.mode === 'development' ? '[id].css' : '[id].[hash].css',
}),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
hot: true
}
};
来自 package.json 的依赖项
"devDependencies": {
"@babel/core": "7.0.0",
"@babel/plugin-proposal-object-rest-spread": "7.0.0",
"@babel/plugin-syntax-dynamic-import": "7.0.0",
"@babel/plugin-transform-runtime": "7.0.0",
"@babel/preset-env": "7.0.0",
"@babel/preset-react": "7.0.0",
"@babel/register": "7.0.0",
"babel-loader": "8.0.2",
"dart-sass": "1.13.1",
"electron": "2.0.8",
"electron-packager": "12.1.1",
"eslint": "5.4.0",
"eslint-plugin-react": "7.11.1",
"mini-css-extract-plugin": "0.4.2",
"react-hot-loader": "4.3.5",
"resolve-url-loader": "2.3.0",
"upath": "1.1.0",
"webpack": "4.17.2",
"webpack-cli": "3.1.0",
"webpack-dev-server": "3.1.7"
},
"dependencies": {
"@babel/polyfill": "7.0.0",
"@babel/runtime-corejs2": "7.0.0",
"@fortawesome/fontawesome-pro": "latest",
"chalk": "2.4.1",
"cheerio": "1.0.0-rc.2",
"colors": "1.3.2",
"fibers": "3.0.0",
"foundation-sites": "6.5.0-rc.2",
"jquery": "3.3.1",
"moment": "2.22.2",
"motion-ui": "2.0.3",
"react": "16.4.2",
"react-dates": "17.2.0",
"react-dom": "16.4.2",
"react-slick": "0.23.1",
"slick-carousel": "1.8.1",
"schema-utils": "1.0.0",
"what-input": "5.1.1"
}
找到了那些刚接触 babel 和 webpack 配置的人的答案，比如我犯了这个错误：
webpack.config.js 不会取代 .babelrc，需要为 babel 插件移动，例如我的 .babelrc 中的以下插件：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
["@babel/plugin-transform-runtime", {
"corejs": 2
}]
]
}