我试图在一个旧项目上使用Babel-loader,我注意到有关babel加载器何时处理包装对象的一些问题,这是它的默认行为吗?我不确定这是一个错误还是我做错了什么,我在google上找不到它,所以这是我的最后一个资源。
我是否需要更改某些内容以使其正常工作?
这是我目前的规格: Webpack:3.19.0 babel / core:7.0.0-beta.34 babel-loader:8.0.0-beta.0
如果需要,请参阅我的packages.json:
http://paste.ubuntu.com/26187880/
我试着加载包含在函数中的单个文件:
http://paste.ubuntu.com/26187814/
恢复,旧的,像这样构建:
( window.global = { } )();
这是我的webpack配置:
const webpackConfig = {
context: __dirname,
entry: {
app: '../../JavaScript/Namespacing.js'
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
}
}
]
},
output: {
path: __dirname + "/../../static/js",
filename: "[name].js"
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
],
}
我收到的错误如下:
Plugin/Preset files are not allowed to export objects, only functions.
所以,我错过了什么吗?
感谢您的帮助。
答案 0 :(得分:38)
我在babel 7.x
和"babel-loader": "^8.0.4"
上遇到了相同的错误
我通过更改package.json.
中的以下依赖关系解决了该问题
I got the solution from these link
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2"
}
和.babelrc
{
"presets": ["@babel/env", "@babel/react"]
}
或在package.json
"babel": {
"presets": [
"@babel/env",
"@babel/react"
]
},
如果您使用的是npm
,请使用以下内容
npm install @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm install @babel/preset-react --save-dev
npm install babel-loader --save-dev
npm install webpack --save-dev
npm install webpack-cli --save-dev
如果您使用的是纱线,请使用以下
yarn add @babel/core --dev
yarn add @babel/preset-env --dev
yarn add @babel/preset-react --dev
yarn add babel-loader --dev
yarn add webpack --dev
yarn add webpack-cli --dev
答案 1 :(得分:6)
从你的package.json中,我可以看到你使用的旧版插件和预设用于Babel v6,这将导致出现此错误消息。您需要切换为@babel/preset-env
,然后相应地更新.babelrc
(如果您提供.babelrc
,则可以提供更具体的指导。)
以下是相关故障单,其中包含一些解释 - https://github.com/babel/babel-loader/issues/540
关于我在package.json
中看到的一些半相关说明:
旧的babel-core
依赖关系仍然存在。删除此项或将其更新为版本7.0.0-bridge.0
。同样,旧的反应预设在那里,将其删除。
如果您使用env
预设,则根本不需要使用es2015
预设。删除它。
答案 2 :(得分:1)
答案适用于旧版本。目前,此设置已足够:
"presets": ["@babel/preset-env", "@babel/preset-react"],
如果在这些软件包之上使用此软件包“ babel-preset-stage-0”,您仍然会遇到相同的错误。因此,请卸载“ babel-preset-stage-0”,并确保除“ babel-loader”外,所有babel软件包均以“ @babel”开头。 @babel表示该软件包由babel团队维护
答案 3 :(得分:1)
最新版本的 babel 包(在 main npmjs 中)是:
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
...
但是您必须在 @babel/ 范围存储库中使用 The Continued 版本:
到今天这些是:
"@babel/core": "^7.12.16",
"@babel/preset-env": "^7.12.16",
"@babel/preset-react": "^7.12.13",
...
所以你必须卸载并安装它们:
npm uninstall babel-core babel-preset-env babel-preset-react
npm install @babel/core @babel/preset-env @babel/preset-react
或:
yarn remove babel-core babel-preset-env babel-preset-react --dev
yarn add @babel/core @babel/preset-env @babel/preset-react --dev
<块引用>
注意 1:您可以添加 @
并将第一个 -
更改为 /
注意 2:请注意,babel-loader 包不在 babel 中 包,它是 webpack 加载 babel 的模块。 (它仍然 最新版本的 bebel-loader)
将 babel 更改为其范围后,您必须在 .babelrc
中进行必要的更改:
来自:
"presets" : ["env","react"]
到:
"presets" : ["@babel/preset-env","@babel/preset-react"]
答案 4 :(得分:0)
这对我有用:
npm卸载--save babel-loader
npm卸载--save @ babel / core
npm install --save-dev babel-loader @ ^ 7
并在babelrc中:
“预设”:[“ env”,“反应”]
答案 5 :(得分:0)
大多数软件包甚至都没有安装。所以,这是实际工作的组合。请记住在测试和 .babelrc 中的更改之前删除您的 node_modules 很重要。更新了 package.json 和 .babelrc 的 devDependencies。
更新自:
1. Package.json file:
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"webpack": "^4.41.2",
}
2. .babelrc file:
{
"presets": [
"env",
"react",
"es2015"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
"transform-react-jsx"
]
}
更新为:
1. Package.json file:
"devDependencies": {
"@babel/core": "^7.13.10",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"babel-cli": "^6.26.0",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.4",
"webpack": "^4.46.0"
}
2. .babelrc file:
{
"presets": ["@babel/preset-env", "@babel/react"],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
"transform-react-jsx"
]
}