为什么使用babel

ECMAScript 6(ES6)的发展速度非常之快，但现代浏览器对ES6新特性支持度不高，所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。

Babel是一个广泛使用的转码器，babel可以将ES6代码完美地转换为ES5代码，所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

babel使用

1. 运行以下命令安装所需的包（package）：

npm install --save-dev @babel/core @babel/cli @babel/preset-env

2.在项目的根目录下创建一个命名为 babel.config.json 的配置文件（需要 v7.8.0 或更高版本），并将以下内容复制到此文件中：

{"presets": [["@babel/preset-env",{"targets": {"edge": "17","firefox": "60","chrome": "67","safari": "11.1"},"useBuiltIns": "usage","corejs": "3.6.5"}]]
}

上述浏览器列表仅用于示例。请根据你所需要支持的浏览器进行调整。参见此处以了解 @babel/preset-env 可接受哪些参数。

如果你使用的是 Babel 的旧版本，则文件名为 babel.config.js。

const presets = [["@babel/preset-env",{targets: {edge: "17",firefox: "60",chrome: "67",safari: "11.1",},useBuiltIns: "usage",corejs: "3.6.4",},],
];module.exports = { presets };

3.插件和预设（preset）

代码转换功能以插件的形式出现，插件是小型的 JavaScript 程序，用于指导 Babel 如何对代码进行转换。你甚至可以编写自己的插件将你所需要的任何代码转换功能应用到你的代码上。例如将 ES2015+ 语法转换为 ES5 语法，我们可以使用诸如 @babel/plugin-transform-arrow-functions 之类的官方插件：

npm install --save-dev @babel/plugin-transform-arrow-functions

现在，我们代码中的所有箭头函数（arrow functions）都将被转换为 ES5 兼容的函数表达式了：

const fn = () => 1;// converted tovar fn = function fn() {return 1;
};

这是个好的开始！但是我们的代码中仍然残留了其他 ES2015+ 的特性，我们希望对它们也进行转换。我们不需要一个接一个地添加所有需要的插件，我们可以使用一个 “preset” （即一组预先设定的插件）。

就像插件一样，你也可以根据自己所需要的插件组合创建一个自己的 preset 并将其分享出去。J对于当前的用例而言，我们可以使用一个名称为 env 的 preset。

npm install --save-dev @babel/preset-env

如果不进行任何配置，上述 preset 所包含的插件将支持所有最新的 JavaScript （ES2015、ES2016 等）特性。但是 preset 也是支持参数的。我们来看看另一种传递参数的方法：配置文件，而不是通过终端控制台同时传递 cli 和 preset 的参数。

配置

根据你的需要，可以通过几种不同的方式来使用配置文件。另外，请务必阅读我们关于如何配置 Babel 的深入指南以了解更多信息。

其实vue 已经引入了babel，检查package.json是否有依赖 @vue/cli-plugin-babel，只需要配置babel.config.js 和 package.json里添加下面代码

package.json

"browserslist": ["> 1%","last 2 versions","not dead","Chrome 40.0", // 兼容低版本谷歌"ie >= 9"  // 兼容ie 9]

.babel.config.js

module.exports = {presets: [// https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app'@vue/cli-plugin-babel/preset'],'env': {'development': {// babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().// This plugin can significantly increase the speed of hot updates, when you have a large number of pages.'plugins': ['dynamic-import-node']}}
}

实践

1.在main.js中引入 ,一定要在最顶部引入

import "core-js/stable";
import "regenerator-runtime/runtime";

2.babel.config.js 配置

module.exports = {presets: [// '@vue/cli-plugin-babel/preset',[// '@babel/preset-env','@vue/app',{modules: 'commonjs',useBuiltIns: 'entry',//entry usagecorejs: "3",debug:true}]],sourceType: 'unambiguous'// "plugins": [//   [//     "@babel/plugin-transform-runtime",//     {//       "corejs": 3 // 指定 runtime-corejs 的版本，目前有 2 3 两个版本//     }//   ]// ]
};

ie中遇到的问题

1.因为webstorm格式化会在最后一个属性后面加一个，导致ie不兼容。用eslint 格式化配置将最后一个逗号去掉。
在.eslintrc.js中加入

module.exports = {root: true,env: {node: true,},extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],parserOptions: {parser: "babel-eslint",},rules: {"no-console": process.env.NODE_ENV === "production" ? "warn" : "off","no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",'prettier/prettier': [process.env.NODE_ENV === 'production' ? 'warn' : 'off',{singleQuote: true,semi: false,},],"comma-dangle": [1, "never"] // 这里就是格式化最后一个逗号},
};

2.因为项目中用到了sm4等加密方式，babel并没有将依赖转义为es5。所以我们还要再加一个配置，让babel转译我们的依赖。
在vue.config.js中加入配置项

transpileDependencies: ['sm-crypto','bpmn-js','bpmn-js-properties-panel','diagram-js','bpmn-moddle','@bpmn-io','@bpmn-io/element-templates-validator'],

记录vue使用bable将es6转译为es5相关推荐

Bable实现由ES6转译为ES5
Babel是一个广泛使用的转码器,可以将ES6代码转译为ES5代码,从而在现有环境下执行. 举例说明: 转译前(ES6格式)代码如下: let User = { name : '张三', age : ...
最新个人编写记录 vue技巧
记录VUE 技巧持续更新ing- .sync 与 $emit 父级 <-------- > 子级同步变量父级 <template><div><cust ...
vue的路由与es6的import, export
vue主要用来实现前端模块化编程, 它的最终代码是一些序列化的js,简单的index.html访问入口,和一些image, vue的js使用es6来模块化设计, 为什么要这么做呢,我想主要是为了前端与 ...
vue项目引入不符合ES6模块化标准的JS文件
vue项目引入不符合ES6模块化标准的JS文件实现方式实现原理实现方式要引入的文件放在public目录下,在index.html中通过script标签引入实现原理参考vue官网–处理静态资 ...
如何利用babel工具将es6语法转换成es5语法
如何利用babel工具将es6语法转换成es5语法一.很多同学疑问既然es6已经出来的了,为很莫写完es6语法还要把他转换成es5,这不是脱裤子放屁吗? ECMAScript 6(ES6)的发展速度 ...
记录Vue项目中使用的各插件
记录项目 package.json 文件中各插件的使用 : 目录 1.axios 2.babel-polyfill 3.core-js 4.echarts 5.element-ui 6.es6-p ...
记录vue预渲染prerender-spa-plugin踏坑
1.安装命令:cnpm install prerender-spa-plugin -D //避免报错,会自动下载文件等待 2.找到build下的webpack.prod.conf.js 头部添加 ...
记录 vue项目打包放入 hbuilder 做app真机测试时无法请求后台服务接口
1.因为发布app时 vue开发模式下配置的跨域是无效的,打包后会找不到接口例如下面是之前的错误版: '/propertyCmsAPI': {target: 'http://192.168.1.11 ...
记录vue使用KindEditor上传图片发生的iframe跨域的错误
记录KindEditor上传图片时候发生的错误:Blocked a frame with origin "http://localhost:8080" from accessing ...
java新建项目流程,记录vue创建项目过程
已经学过无数次,但是每次都忘记,毕竟脑容量太小了,每次都需要翻看原来项目和视频再次学习,所以以此文字形式记录下来,方便于下次使用观看 1.打开git,找到创建vue的文件夹(已经安装好git的,然后在 ...

记录vue使用bable将es6转译为es5

为什么使用babel

babel使用

1. 运行以下命令安装所需的包（package）：

2.在项目的根目录下创建一个命名为 babel.config.json 的配置文件（需要 v7.8.0 或更高版本），并将以下内容复制到此文件中：

3.插件和预设（preset）

配置

其实vue 已经引入了babel，检查package.json是否有依赖 @vue/cli-plugin-babel，只需要配置babel.config.js 和 package.json里添加下面代码

实践

ie中遇到的问题

记录vue使用bable将es6转译为es5相关推荐

最新文章

热门文章

记录vue使用bable将es6转译为es5

为什么使用babel

babel使用

1. 运行以下命令安装所需的包（package）：

2.在项目的根目录下创建一个命名为 babel.config.json 的配置文件（需要 v7.8.0 或更高版本），并将以下内容复制到此文件中：

3.插件和预设（preset）

配置

其实vue 已经引入了babel， 检查package.json是否有依赖 @vue/cli-plugin-babel，只需要配置babel.config.js 和 package.json里添加下面代码

实践

ie中遇到的问题

记录vue使用bable将es6转译为es5相关推荐

最新文章

热门文章

其实vue 已经引入了babel，检查package.json是否有依赖 @vue/cli-plugin-babel，只需要配置babel.config.js 和 package.json里添加下面代码