网站开发公司销售总监岗位要求,企业网站重要吗,做网站 所需资源,平板网站开发环境babel6使用ES2020最新js语法 Babel 6 原本是不支持 ES2020 语法#xff0c;因为它是在 Babel 7 中引入的。如果您想使用 ES2020 语法#xff0c;您需要将 Babel 6 升级到 Babel 7 或更高版本(推荐),当然也可以在bebel6中安装支持某个语法的plugin,比如你想使用 ES2020 中的可…
babel6使用ES2020最新js语法 Babel 6 原本是不支持 ES2020 语法因为它是在 Babel 7 中引入的。如果您想使用 ES2020 语法您需要将 Babel 6 升级到 Babel 7 或更高版本(推荐),当然也可以在bebel6中安装支持某个语法的plugin,比如你想使用 ES2020 中的可选链操作符,就要配置使用 babel/plugin-proposal-optional-chaining。 ES2020新增语法
这里只列出我们最常用,也最好用的语法
1. 可选链操作符
const obj {};// 老语法
let second obj obj.first obj.first.second;//es2020可选链语法
let second obj?.first?.second;2. 空位合并运算符
// 老语法
//这两种方式有个明显的弊端它都会覆盖所有的假值如(0, , false)这些值可能是在某些情况下有效的输入
let c a ? a : b // 方式1
let c a || b // 方式2//es2020
// ??的左侧运算符求值为 undefined 或 null才返回其右侧默认值
let c a ?? b;
// 等价于let c a ! undefined a ! null ? a : b;方式一: 升级babel7(推荐)
1. 使用Babel升级工具
不要手动升级,因为不同babel版本依赖不同的node和webpack版本,借助工具可以自动匹配对应版本.比如我项目中使用的是webpack4和node12,工具就会自动安装babel-loader8版本,不会安装最新的v9.
# 不安装直接使用npx来执行
npx babel-upgrade --write# 或是安裝 babel-upgrade 在 global 並執行
npm i -g babel-upgrade
babel-upgrade --write执行命令后, package.json 中移除了旧版本的依赖自动新增了新版依赖 babel/core: ^7.0.0,babel/plugin-proposal-class-properties: ^7.0.0,babel/plugin-proposal-object-rest-spread: ^7.0.0,babel/plugin-syntax-dynamic-import: ^7.0.0,babel/plugin-syntax-jsx: ^7.0.0,babel/plugin-transform-runtime: ^7.0.0,babel/preset-env: ^7.0.0,
- babel-core: ^6.25.0,
- babel-loader: ^7.1.1,
- babel-plugin-syntax-dynamic-import: ^6.18.0,
- babel-plugin-syntax-jsx: ^6.18.0,
- babel-plugin-transform-class-properties: ^6.24.1,
- babel-plugin-transform-object-rest-spread: ^6.26.0,
- babel-plugin-transform-runtime: ^6.23.0,babel-loader: ^8.0.0,
- babel-preset-env: ^1.6.1,2. 删除node_modules,重新安装依赖
# 删除node_module
rm -rf node_modules
# 重新安装
npm i3. 修改配置文件.babelrc
// 原.babelrc文件
{presets: [[env, {loose: true,debug: false,useBuiltIns: true,targets: {browsers: [ ie 8, last 2 version, safari 9 ]},production: {plugins: [transform-remove-console]}}]],plugins: [[ transform-runtime, {helpers: false,polyfill: false,regenerator: true } ],[ transform-class-properties, { spec: true } ],[ transform-object-rest-spread, { useBuiltIns: true } ],[ transform-vue-jsx ],[ syntax-dynamic-import ]],comments: false}// 修改后.babelrc文件(其他所有配置都不需要了)
//babel/preset-env 预设能根据目标环境自动决定要使用的插件和转换规则而无需手动安装和配置单个插件
{presets: [[babel/preset-env]]
}4. 修改webpack配置文件
module: {rules: [{test: /\.vue$/,loader: vue-loader,options: {hotReload: !isProduction},},{test: /\.js$/,exclude: /(node_modules|bower_components)/,use: [{loader: babel-loader,options: {cacheDirectory: true,cacheIdentifier: babel-loader,//修改这个位置,原来值为true修改为babel-loader},},],}],},方式二: 安装指定语法plugin
1. 可选链操作符
1.安装
npm i -D babel/plugin-proposal-optional-chaining2.配置.babelrc
{presets: [[env]],plugins: [[ transform-runtime],[ transform-class-properties],[ babel/plugin-proposal-optional-chaining],//配置[ transform-object-rest-spread],[ transform-vue-jsx ],[ syntax-dynamic-import ]],comments: false}2. 空位合并运算符
1.安装
npm i -D babel/plugin-proposal-nullish-coalescing-operator2.配置.babelrc
{presets: [[env]],plugins: [[ transform-runtime],[ transform-class-properties],[ babel/plugin-proposal-nullish-coalescing-operator],//配置[ babel/plugin-proposal-optional-chaining],[ transform-object-rest-spread],[ transform-vue-jsx ],[ syntax-dynamic-import ]],comments: false}通过插件方式,也可以实现使用es2020中的新语法,但更建议第一种方式.
