分享:Babel7的配置

简介: 分享:Babel7的配置

Babel是一个JavaScript编译器。
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。
从7版本,Babel的安装和之前是有区别的,这在安装的时候,要注意写对包名。
7的安装方式:
npm install --save-dev @babel/core @babel/cli @babel/preset-env npm install --save @babel/polyfill
之前的版本中,babel前边没有@符号。

上述命令是安装的当前开发的工作空间,如需全局安装,请把参数换成-g。

在工程的目录下边新建babel.config.js文件,当然新建6版本所使用的.babelrc文件也是能够进行使用的。

babel.config.js文件内容示例,targets是目标的浏览器版本,这个可以实际使用中进行修改。

const presets = [  [  

 "@babel/env",  

  {
   
       

 targets: {
   
          

  edge: "17", 

 firefox: "60", 

 chrome: "67", 

 safari: "11.1", 

},      

useBuiltIns: "usage",   

 },  ], ];

module.exports = {
   
    presets };

执行转换脚本的命令,针对文件夹的命令,也可以针对单个文件进行转换。

./node_modules/.bin/babel src --out-dir lib

./node_modules/.bin/babel  sample.js -o buildenv.js

可以在package.json中进行执行脚本的配置:
image.png
7版本中,presets中没有类似于es2015的设置了,在7版本中,应该是设置@babel/preset-env,参加下列的英文说明:
@babel/preset-es2015@7.0.0-beta.53: 👋 We've deprecated any official yearly presets in 6.x in favor or babel-preset-env. For 7.x i
t would be @babel/preset-env.

在JavaScript开发时,我们就能够使用新的ECMAScirpt语法,之后使用Babel将代码转换成兼容浏览器的方式。

参考:
https://www.babeljs.cn/docs/
https://babeljs.io/docs/en/

相关文章
|
机器学习/深度学习 TensorFlow 算法框架/工具
TensorFlow入门指南:基础概念与安装
【4月更文挑战第17天】TensorFlow入门指南介绍了该流行深度学习框架的基础概念和安装步骤。核心概念包括张量(多维数组)、计算图(表示计算任务的图结构)、会话(执行环境)以及变量(存储模型参数)。安装TensorFlow可通过pip或conda,GPU支持需额外条件。安装成功后,通过Python验证版本即可开始使用。
|
JavaScript API
vue 3.0 所采用的 Composition Api 和 vue 2.0 使用的 Option Api 区别
vue 3.0 所采用的 Composition Api 和 vue 2.0 使用的 Option Api 区别
241 0
|
11月前
|
UED 开发者
鸿蒙next版开发:ArkTS组件通用属性(运动模糊)
在HarmonyOS 5.0中,ArkTS引入了运动模糊功能,允许开发者为组件添加动态模糊效果,增强视觉表现。本文详细解读了运动模糊的属性和使用方法,并提供了示例代码。运动模糊可增强视觉效果、提升用户体验和实现动态效果,适用于多种场景。
315 2
|
移动开发 前端开发 JavaScript
Vue2 系列:vue.config.js 参数配置
Vue2 系列:vue.config.js 参数配置
1011 2
|
自然语言处理 JavaScript 前端开发
拯救浏览器兼容性:Babel是前端开发的必备神器(一)
拯救浏览器兼容性:Babel是前端开发的必备神器
|
存储 数据挖掘 索引
Python streamlit框架开发数据分析网站并免费部署
使用Python的Streamlit框架,开发了一个在线数据分析工具,替代Excel查看设备温度CSV数据。通过pandas读取数据,matplotlib绘制图表。程序处理CSV,提取所需列,计算最大最小平均值,用户可多选查看特定数据。[GitHub](https://github.com/yigedaigua/MGHB)上有完整代码,应用已部署至Streamlit Cloud。
353 1
项目打包优化上线Uncaught TypeError: Cannot redefine property: $router
项目打包优化上线Uncaught TypeError: Cannot redefine property: $router
|
存储 Oracle 网络协议
实战篇:使用 StarWind 配置 ISCSI 共享存储
实战篇:使用 StarWind 配置 ISCSI 共享存储
实战篇:使用 StarWind 配置 ISCSI 共享存储
|
JavaScript
[Vue warn]: Unknown custom element: <Top> - did you register the component correctly?
[Vue warn]: Unknown custom element: <Top> - did you register the component correctly?
|
API C语言 图形学
EasyX图形库学习(一、窗口创建函数initgraph、背景颜色设置setbkcolor、图形绘制函数)
EasyX图形库学习(一、窗口创建函数initgraph、背景颜色设置setbkcolor、图形绘制函数)
下一篇
oss教程