分享: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/

相关文章
|
10月前
|
前端开发
`Promise.all()`方法在处理数组形式参数时的执行机制
Promise.all()` 提供了一种方便的方式来同时处理多个异步操作,并在它们都完成后获取到所有的结果,使得我们能够更高效地进行异步任务的组合和处理。
|
10月前
|
前端开发 JavaScript 开发者
前端开发的终极技巧:如何让你的代码既简洁又高效,还能减少bug?
【10月更文挑战第30天】前端开发充满挑战与创新,如何编写简洁高效且少bug的代码是开发者关注的重点。本文介绍五大技巧:1. 模块化,提高代码复用性;2. 组件化,降低代码耦合度;3. 使用现代框架,提高开发效率;4. 统一代码规范,降低沟通成本;5. 利用工具,优化代码质量。掌握这些技巧,让前端开发更高效。
448 1
|
存储 JavaScript 前端开发
JavaScript四舍五入取整
JavaScript四舍五入取整
|
11月前
|
监控 JavaScript 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
自然语言处理 JavaScript 前端开发
拯救浏览器兼容性:Babel是前端开发的必备神器(一)
拯救浏览器兼容性:Babel是前端开发的必备神器
|
JSON 前端开发 JavaScript
使用vite搭建一个React项目!真香!
【8月更文挑战第13天】使用vite搭建一个React项目!真香!
2101 3
使用vite搭建一个React项目!真香!
项目打包优化上线Uncaught TypeError: Cannot redefine property: $router
项目打包优化上线Uncaught TypeError: Cannot redefine property: $router
|
前端开发 JavaScript 开发者
实用技巧:提高前端开发效率的5个方法
提高前端开发效率是每个开发者都追求的目标。本文将介绍5个实用的技巧,帮助前端开发者提升工作效率:使用代码片段加速开发、合理利用浏览器开发者工具、充分利用现有框架和库、使用自动化构建工具、保持学习和不断优化工作流程。
|
移动开发 前端开发 JavaScript
Vue2 系列:vue.config.js 参数配置
Vue2 系列:vue.config.js 参数配置
985 2