webapck 启动报错 SyntaxError: Support for the experimental syntax 'optionalChainingAssign' isn't currently enabled (103:13):
已经引入了@babel/plugin-proposal-optional-chaining
还是报错,这种怎么修改?
报错代码 common.js 在 主入口文件中引入了
function scrollToCompatibleIE(element, top, left) { if (element && top && left) { if (typeof element.scrollTo !== 'function') { element?.scrollTop = top; // 这里报错 element?.scrollLeft = left; // 这里报错 } else { element?.scrollTo({ top: top, left: left, }); } }}
.babelrc 配置
{ "presets": [ [ "@babel/preset-env", { "targets": { "browsers": [ "ie >=9", "chrome >= 48", "android >= 4.4", "ios >= 9", "safari >= 7" ] }, "useBuiltIns": "usage", "corejs": 3 } ] ], "plugins": [ "@babel/plugin-proposal-optional-chaining", "@babel/plugin-transform-runtime" ]}
webapck.config.js 配置
rules: [ { test: /\.m?js$/, // 匹配 .js 或 .mjs 文件 exclude: /node_modules/, use: { loader: "babel-loader", options: { configFile: path.resolve(__dirname, '.babelrc') // 指定Babel配置文件 } }, },
package.json 配置
{ "scripts": { "start:test": "npx cross-env envMode=test webpack serve --open --mode development" }, "devDependencies": { "@babel/core": "^7.24.4", "@babel/plugin-proposal-optional-chaining": "^7.21.0", "@babel/plugin-transform-runtime": "^7.24.3", "@babel/preset-env": "^7.24.4", "@vue/compiler-sfc": "^3.4.25", "autoprefixer": "^10.4.19", "babel-loader": "^9.1.3", "clean-webpack-plugin": "^4.0.0", "css-loader": "^7.1.1", "dotenv": "^16.4.5", "html-webpack-plugin": "^5.6.0", "image-minimizer-webpack-plugin": "^4.0.0", "imagemin": "^8.0.1", "mini-css-extract-plugin": "^2.9.0", "postcss": "^8.4.38", "postcss-loader": "^8.1.1", "postcss-px-to-viewport": "^1.1.1", "sass": "^1.75.0", "sass-loader": "^14.2.1", "style-loader": "^4.0.0", "vue-loader": "^17.3.1", "webpack": "^5.91.0", "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^5.1.4", "webpack-dev-server": "^5.0.4" }, "dependencies": { "axios": "^1.4.0", "core-js": "^3.37.0", "default-passive-events": "^2.0.0", "jquery": "^3.7.1", "regenerator-runtime": "^0.14.1", "vconsole": "^3.15.1", "vue": "^3.4.25", "weixin-js-sdk": "^1.6.5" }}
Babel 插件 @babel/plugin-proposal-optional-chaining
是用来支持可选链(Optional Chaining)
语法的,而不是可选链赋值(Optional Chaining Assignment)
报错信息提示的是不支持实验性的语法 'optionalChainingAssign'
,即使你已经添加了 @babel/plugin-proposal-optional-chaining
插件。实际上,optionalChainingAssign
并不是一个 Babel 官方支持的插件选项。Babel 插件 @babel/plugin-proposal-optional-chaining
是用来支持可选链(Optional Chaining)语法的,而不是可选链赋值(Optional Chaining Assignment)。
在你的代码中:
element?.scrollTop = top; // 这里报错element?.scrollLeft = left; // 这里报错
这里你尝试使用可选链语法进行属性赋值,但这不是可选链的标准用法。可选链主要用于安全地访问深层嵌套的属性,而不是用于赋值。如果你想在赋值时实现类似可选链的功能,你应该使用逻辑与(Logical AND)操作符 (&&
) 或者其他条件判断。
举个例子,将上面的代码修改为:
if (element) { element.scrollTop = top; element.scrollLeft = left;}
或者,如果你希望使用类似可选链的语法来避免 element
为 null
或 undefined
时抛出错误,可以这样写:
element && (element.scrollTop = top);element && (element.scrollLeft = left);
此外,你的 .babelrc
配置中不需要包含 @babel/plugin-transform-runtime
插件,除非你需要使用 Babel 的运行时帮助函数(例如 _classCallCheck
等),这通常在你使用某些 Babel 插件(比如 @babel/plugin-proposal-class-properties
)时会需要。
因此,请按照上述方式修改你的代码,并移除 .babelrc
中不必要的插件配置。如果仍然遇到问题,请确保你的 Babel 和相关插件的版本是最新的,并且与你的 Webpack 配置兼容。有时候,问题可能也出现在项目依赖未正确安装或缓存导致的,尝试删除 node_modules
文件夹和 package-lock.json
或 yarn.lock
文件,然后重新运行 npm install
或 yarn
来安装依赖。
script是一小段程序,可以为您的网站添加交互性。 例如,脚本可以生成弹出警报框消息,或提供下拉菜单。 可以使用JavaScript或VBScript编写此脚本。 您可以使用任何脚本语言编写各种小函数,称为事件处理程序,然后您可以使用HTML属性触发这些函数。 现在,大多数Web开发人员只JavaScript和相关框架,甚至各种主流浏览器都不支持VBScript。 您可以将JavaScript代
在本章中,我们将研究JavaScript 。 在Foundation中设置JavaScript很容易; 你唯一需要的就是jQuery。 JavaScript安装 您可以使用ZIP下载,包管理器或CDN来获取Foundation JavaScript文件。 在您的代码中,您可以提供指向jQuery和Foundation的链接作为标记,放在结束之前,并检查在jQuery之后加载Foundation。
使用Java 8,Nashorn,引入了一个大大改进的javascript引擎,以取代现有的Rhino。 Nashorn提供2到10倍的性能,因为它直接编译内存中的代码并将字节码传递给JVM。 Nashorn使用Java 7中引入的调用动态特性来提高性能。 jjs 对于Nashorn引擎,JAVA 8引入了一个新的命令行工具jjs,用于在控制台执行javascript代码。 解释js文件 在c:\
js 代码如下 报错日志: ReferenceError: escodegen is not defined
在本章中,我们将重点介绍在PyCharm编辑器中使用JavaScript的主要功能。 当用户通过URL实现JavaScript库时,PyCharm打算下载本地副本,以便可以用于完成和代码分析。 考虑我们的HTML文件的示例代码,如下所示,我们在上一章中创建了该代码 - 对于每个HTML文件或JavaScript文件,您可以检查通过PyCharm Editor的Settings配置加载的外部库。 观
描述 (Description) 也可以使用相关的 app 方法使用 JavaScript 打开和关闭 popover,如下所示 - myApp.popover(popover, target) - 用于打开目标元素周围的myApp.popover(popover, target) ,它接受以下参数 - popover - 这是一个required参数,它是一个要打开的popover的HTMLEl
描述 (Description) 您可以使用JavaScript App方法启用和禁用sortable,如下所示 - myApp.sortableOpen(sortableContainer) - 用于在指定的可排序容器上启用排序模式。 myApp.sortableClose(sortableContainer) - 用于在指定的可排序容器上禁用排序模式。 myApp.sortableToggle
描述 (Description) 您可以使用JavaScript代码打开和关闭选取器模式。 您可以使用pickerModal(picker)方法打开closeModal(picker)模式和closeModal(picker)方法来关闭closeModal(picker)模式。 例子 (Example) 以下示例使用Framework7中的JavaScript显示打开和关闭选择器模式 - <!DO