房产网站建设整体架构,印江建设局网站,如何做框架网站,宝应县建设工程信息网简介 bable 用于将 ES6 的语法编译为 ES5
只关心语法#xff0c;不关心 API 是否正确。不处理模块化#xff08;webpack 会处理#xff09; 搭建开发环境 安装相关的包
npm i babel/cli babel/core babel/preset-env新建文件 .babelrc#xff0c;内容为
{ presets… 简介 bable 用于将 ES6 的语法编译为 ES5
只关心语法不关心 API 是否正确。不处理模块化webpack 会处理 搭建开发环境 安装相关的包
npm i babel/cli babel/core babel/preset-env新建文件 .babelrc内容为
{ presets: [[babel/preset-env]],plugins: []
}presets 内为预设的 plugins 的集合 编译 jsx用 bakel/preset-react编译 TS用 babel/preset-typescript bable 本身是个空壳所有的编译是通过一个个 plugins 实现的 执行编译 npx babel src/index.jsbabel-polyfill babel-polyfill 是 core-js 和 regenerator 的集合。
core-js 除了不支持生成器语法其他都能编译regenerator 可编译生成器语法弥补了 core-js 的不足
注意事项 Babel 7.4之后弃用了 babel-polyfil推荐直接使用 core-js和 regenerator但面试中还是可能考察。
按需引入的配置方法
按需引入只引入代码中使用的部分其他部分不引入可减少最终打包的体积。
.babelrc
presets: [[babel/preset-env,{useBuiltIns: usage,// corejs 的最新版本号corejs: 3}]
],Babel 7.4之后弃用了 babel-polyfil但也是按此方式配置因为它直接用的 corejs 没有用到 babel-polyfil
存在的问题
会污染全局环境因为其实现方式是 可能会覆盖用户的定义。 babel-runtime 用于解决 babel-polyfil 污染全局环境的问题。
仅自己开发的系统可以不使用 babel-runtime 但若是开发第三方库则一定要用 babel-runtime
实现原理
使用 _promise _includes 等自定义名称的方式避免和用户的定义冲突。
配置方法
安装 babel/plugin-transform-runtime 在 devDependencies 中安装 babel/runtime 在 dependencies 中.babelrc 的 plugins 中添加 plugins: [[babel/plugin-transform-runtime,{absoluteRuntime: false,corejs: 3,helpers: true,regenerator: true,useESModules: false}]]通常按此官方配置即可。
