babel如何把框架的全部代码编译成兼容格式？
选择的前端框架，放到钉钉手机端浏览器报错，怀疑是浏览器不支持??和?.
听说babel可以把编译代码成兼容格式，小菜不知道怎么用，求指导
查阅了一些资料我这样弄
先
pnpm add --save-dev @babel/plugin-proposal-optional-chaining再建一个babel.config.json写上
{
"plugins": ["@babel/plugin-proposal-optional-chaining"]
}然后就不知道怎么弄了~~
--------------测试补充------------------
package.json
{
"name": "yudao-ui-admin-vue3",
"version": "1.7.2-snapshot",
"description": "基于vue3、vite4、element-plus、typesScript",
"author": "xingyu",
"private": false,
"scripts": {
"i": "pnpm install",
"dev": "vite --mode base",
"front": "vite --mode front",
"ts:check": "vue-tsc --noEmit",
"build:pro": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode pro",
"build:dev": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode dev",
"build:stage": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode stage",
"build:test": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode test",
"build:static": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode static",
"build:front": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode front",
"serve:pro": "vite preview --mode pro",
"serve:dev": "vite preview --mode dev",
"serve:test": "vite preview --mode test",
"npm:check": "npx npm-check-updates",
"clean": "npx rimraf node_modules",
"clean:cache": "npx rimraf node_modules/.cache",
"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
"lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
"lint:style": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
"lint:lint-staged": "lint-staged -c ",
"lint:pretty": "pretty-quick --staged"
},
"dependencies": {
"@element-plus/icons-vue": "^2.1.0",
"@form-create/designer": "^3.1.0",
"@form-create/element-ui": "^3.1.17",
"@iconify/iconify": "^3.1.0",
"@videojs-player/vue": "^1.0.0",
"@vueuse/core": "^9.13.0",
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.10",
"@zxcvbn-ts/core": "^2.2.1",
"animate.css": "^4.1.1",
"axios": "^1.3.5",
"benz-amr-recorder": "^1.1.5",
"bpmn-js-token-simulation": "^0.10.0",
"camunda-bpmn-moddle": "^7.0.1",
"cropperjs": "^1.5.13",
"crypto-js": "^4.1.1",
"dayjs": "^1.11.7",
"diagram-js": "^11.6.0",
"echarts": "^5.4.1",
"echarts-wordcloud": "^2.1.0",
"element-plus": "2.3.3",
"fast-xml-parser": "^4.1.3",
"highlight.js": "^11.7.0",
"intro.js": "^7.0.1",
"jsencrypt": "^3.3.2",
"lodash-es": "^4.17.21",
"min-dash": "^4.0.0",
"mitt": "^3.0.0",
"nprogress": "^0.2.0",
"pinia": "^2.0.34",
"qrcode": "^1.5.1",
"qs": "^6.11.1",
"steady-xml": "^0.1.0",
"url": "^0.11.0",
"video.js": "^8.0.4",
"vue": "3.2.47",
"vue-i18n": "9.2.2",
"vue-router": "^4.1.6",
"vue-types": "^5.0.2",
"vuedraggable": "^4.1.0",
"web-storage-cache": "^1.1.1",
"xe-utils": "^3.5.7",
"xml-js": "^1.6.11"
},
"devDependencies": {
"@babel/cli": "^7.21.0",
"@babel/core": "^7.21.4",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
"@babel/plugin-proposal-optional-chaining": "^7.21.0",
"@babel/preset-env": "^7.21.4",
"@commitlint/cli": "^17.5.0",
"@commitlint/config-conventional": "^17.4.4",
"@iconify/json": "^2.2.38",
"@intlify/unplugin-vue-i18n": "^0.10.0",
"@purge-icons/generated": "^0.9.0",
"@types/intro.js": "^5.1.1",
"@types/lodash-es": "^4.17.7",
"@types/node": "^18.15.5",
"@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.5.0",
"@types/qs": "^6.9.7",
"@typescript-eslint/eslint-plugin": "^5.56.0",
"@typescript-eslint/parser": "^5.56.0",
"@vitejs/plugin-legacy": "^4.0.2",
"@vitejs/plugin-vue": "^4.1.0",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue/cli-plugin-babel": "^5.0.8",
"autoprefixer": "^10.4.14",
"bpmn-js": "^8.9.0",
"bpmn-js-properties-panel": "^0.46.0",
"consola": "^2.15.3",
"eslint": "^8.36.0",
"eslint-config-prettier": "^8.8.0",
"eslint-define-config": "^1.17.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.9.0",
"lint-staged": "^13.2.0",
"postcss": "^8.4.21",
"postcss-html": "^1.5.0",
"postcss-scss": "^4.0.6",
"prettier": "^2.8.6",
"rimraf": "^4.4.1",
"rollup": "^3.20.0",
"sass": "^1.59.3",
"stylelint": "^15.3.0",
"stylelint-config-html": "^1.1.0",
"stylelint-config-prettier": "^9.0.5",
"stylelint-config-recommended": "^11.0.0",
"stylelint-config-standard": "^31.0.0",
"stylelint-order": "^6.0.3",
"terser": "^5.16.6",
"typescript": "5.0.2",
"unplugin-auto-import": "^0.15.1",
"unplugin-element-plus": "^0.7.0",
"unplugin-vue-components": "^0.24.1",
"vite": "4.2.1",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-ejs": "^1.6.4",
"vite-plugin-eslint": "^1.8.1",
"vite-plugin-progress": "^0.0.6",
"vite-plugin-purge-icons": "^0.9.2",
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-top-level-await": "^1.3.0",
"vite-plugin-vue-setup-extend-plus": "^0.1.0",
"vite-plugin-windicss": "^1.8.10",
"vue-tsc": "^1.2.0",
"windicss": "^3.5.6"
},
"engines": {
"node": ">=16.0.0"
},
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://gitee.com/yudaocode/yudao-ui-admin-vue3"
},
"bugs": {
"url": "https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues"
},
"homepage": "https://gitee.com/yudaocode/yudao-ui-admin-vue3"
}
babel.config.json
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["> 0.25%", "not dead"]
}
}
]
],
"plugins": [
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator"
]
}npm run build:dev的结果
共有1个答案
你先要安装这些插件：
pnpm add --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator然后在创建一个名为 babel.config.json 的文件：
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["> 0.25%", "not dead"]
}
}
]
],
"plugins": [
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator"
]
}这里babel/preset-env 预设，它会自动根据你指定的浏览器目标进行转换。
然后，你要修改你的构建脚本或配置，方便在构建过程中使用 Babel 进行编译。
如果你用的是 Webpack，你要安装 babel-loader：
pnpm add --save-dev babel-loader
然后在你的 webpack.config.js 文件中添加一个规则：
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
};-
问题内容： 我正在构建一个小型Java应用程序，并希望使用logback进行日志记录。 我的应用程序依赖于一个较旧的项目，该项目通过 …所以我的计划是使用 …将JCL日志记录重定向到 …最终 因此我的应用可以通过其slf4j API通过logback登录，而旧的库代码可以通过重定向登录到同一位置。 las，这导致 我在其中一些罐子上尝试了较高和较低的版本号，还通过API文档等进行了挖掘……但是我无
-
问题内容： 请帮助我，如何使AngularJS编译指令生成的代码？ 您甚至可以在这里找到相同的代码，http：//jsbin.com/obuqip/4/edit 的HTML Java脚本 问题答案： 这是一个既不使用编译功能也不使用链接功能的版本： 请注意，模板被包装在中，因为模板需要具有一个根元素。（如果没有，它将有两个 根元素。） 需要对HTML进行少许修改以进行插值： 小提琴。
-
当使用Google Protocol Buffers Version3.0.0（发行版）时，maven编译以下生成的java-class会导致编译器错误： 这只是生成的类之一，所有类的maven错误都是一样的，如下所示： 这些类包含在工作的Maven-Tycho-Build配置中，其类路径上有protobuf-java-3.0.0.jar。在Eclipse中编译代码时，它没有编译器错误。 此外，当
-
问题内容： 代码很简单： 有没有办法编译来自标准输出的代码？ 我已经试过了： 和一些变体，但没有一个产生可执行文件。 只是一些澄清。我有一个预处理文件的程序，并生成另一个要编译的文件。我考虑过不创建此中间文件，而是直接生成目标文件。 问题答案： 编译器可能会告诉您： 尝试
-
最近，我开始研究activiti框架，将其集成到我当前的项目中。在我们的项目中，我们使用teradata数据库。因此，我添加了activiti依赖项，并创建了简单的bpmn流程以进行测试。我用h2 inmemory数据库测试了这个过程，效果很好。但当将项目配置为使用teradata时，我在spring boot应用程序启动时遇到了异常。 我在google上只找到了这个主题： https://hub
-
即便你已经用 Babel 编译了你的代码，但这还不算完。 babel-polyfill Babel 几乎可以编译所有时新的 JavaScript 语法，但对于 APIs 来说却并非如此。 比方说，下列含有箭头函数的需要编译的代码： function addAll() { return Array.from(arguments).reduce((a, b) => a + b); } 最终会变成这