javascript - 如何设置 Babel,然后在命令提示符下点击“npm run dev”,而不会出现“./src/js/index.js 中的错误”?
问题描述
我想要做的是将 babel/polyfill 与 index.js 文件捆绑在一起(使用 webpack)。ma 设置好后,我在命令提示符下运行了“npm run dev”,但没有成功。显示的第一行错误是“./src/js/index.js 中的错误”。我正在研究 javascript (ES6)。
这是一个 webpack.config.js 文件。
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: ["@babel/polyfill", "./src/js/index.js"],
output: {
path: path.resolve(__dirname, "dist"),
filename: "js/bundle.js",
},
devServer: {
contentBase: "./dist"
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./src/index.html"
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
这是一个 .babelrc 文件。
{
"presets": [
["@babel/env", {
"targets": {
"browsers": [
"last 5 versions",
"ie >= 8"
]
}
}]
]
}
这是 ma package.json 文件。
{
"name": "forkify",
"version": "1.0.0",
"description": "forkify project",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"author": "AGO McAGO",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.10.1",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-preset-env": "^1.7.0",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"babel-polyfill": "^6.26.0"
}
}
这是整个错误(在命令提示符下,windows10)。
> webpack --mode development
Hash: 54008735e66cf4b55f83
Version: webpack 4.43.0
Time: 20104ms
Built at: 05/31/2020 18:20:37
Asset Size Chunks Chunk Names
index.html 17.6 KiB [emitted]
js/bundle.js 9.49 KiB main [emitted] main
Entrypoint main = js/bundle.js
[0] multi ./src/js/index.js 28 bytes {main} [built]
[./src/js/index.js] 4.7 KiB {main} [built] [failed] [1 error]
ERROR in ./src/js/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\src\js\index.js: Cannot read property 'bindings' of null
at Scope.moveBindingTo (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\@babel\traverse\lib\scope\index.js:933:13)
at BlockScoping.updateScopeInfo (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:364:17)
at BlockScoping.run (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:330:12)
at PluginPass.BlockStatementSwitchStatementProgram (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:70:24)
at newFn (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\@babel\traverse\lib\visitors.js:179:21)
at NodePath._call (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\@babel\traverse\lib\path\context.js:55:20)
at NodePath.call (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\@babel\traverse\lib\path\context.js:42:17)
at NodePath.visit (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\@babel\traverse\lib\path\context.js:90:31)
at TraversalContext.visitQueue (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\@babel\traverse\lib\context.js:112:16)
at TraversalContext.visitSingle (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\@babel\traverse\lib\context.js:84:19)
at TraversalContext.visit (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\@babel\traverse\lib\context.js:140:19)
at Function.traverse.node (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\@babel\traverse\lib\index.js:84:17)
at traverse (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\@babel\traverse\lib\index.js:66:12)
at transformFile (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\@babel\core\lib\transformation\index.js:107:29)
at transformFile.next (<anonymous>)
at run (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\@babel\core\lib\transformation\index.js:35:12)
at run.next (<anonymous>)
at Function.transform (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\@babel\core\lib\transform.js:27:41)
at transform.next (<anonymous>)
at step (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\gensync\index.js:254:32)
at C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\gensync\index.js:266:13
at async.call.result.err.err (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\gensync\index.js:216:11)
at C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\gensync\index.js:184:28
at C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\@babel\core\lib\gensync-utils\async.js:72:7
at C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\gensync\index.js:108:33
at step (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\gensync\index.js:280:14)
at C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\gensync\index.js:266:13
at async.call.result.err.err (C:\Users\asus1\Documents\AGO McAGO\1.pracareas\7.5Javascript\Jonas Schmedtmann\46.Forkify\node_modules\gensync\index.js:216:11)
@ multi ./src/js/index.js main[0]
Child HtmlWebpackCompiler:
1 asset
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 18.3 KiB {HtmlWebpackPlugin_0} [built]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! forkify@1.0.0 dev: `webpack --mode development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the forkify@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\asus1\AppData\Roaming\npm-cache\_logs\2020-05-31T17_20_37_349Z-debug.log
解决方案
看起来你想使用 babel 7,它开始@babel/
在包名上有一个前缀命名空间,但是你的babel-preset-env
(在 babel 7 上下文中,它是@babel/preset-env
)有能力,babel 6
所以你总是会遇到奇怪的错误。
你有两个 babel-core:
- @babel/core,也就是 babel 7
- babel-core,也就是 babel 6
babel 有很多插件,preset..... 有很多概念,需要良好的基础知识才能正确设置,我会建议 javascript 新人使用模板之类Create-react-app
(您应该使用它来帮助您制作代码包,使用现代语法......即使你不使用反应)不要卷入巴别塔的疯狂......
更多参考:其他人在 Github 上提出的类似错误
推荐阅读
- python - 为什么我的变量显示为“未定义”?
- android - Kotlin Drawer 活动 onclick 事件监听器
- python - 在特定字符串之后提取数据直到python中的新行
- reactjs - 无法将 sass 变量从一个 scss 文件导入到另一个
- reactjs - 反应上下文未定义
- python-3.x - 输入文件中的蛇形通配符
- linux - Anaconda 安装问题
- typescript - 根据打字稿中的条件在开关中设置默认值
- macos - Sublime Text 中的映射选项+k — ST 从来没有看到它,它在吃什么?(OS X)
- arrays - GameMaker 2.2* => 2.3 更新修复数组