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

相关文章
|
4月前
|
前端开发
Vite——如何配置使用sass
Vite——如何配置使用sass
300 0
|
27天前
|
JavaScript 前端开发
Babel 插件的作用是什么?
Babel 插件的作用是什么?
|
1月前
|
JavaScript 前端开发
将 Babel 插件应用于实际项目中
【10月更文挑战第25天】如果在应用插件过程中出现问题,可以检查 Babel 配置是否正确、插件的依赖是否安装完整、构建工具的集成是否正确等,逐步排查和解决问题。通过以上步骤,就可以将 Babel 插件成功应用到实际项目中,实现特定的代码转换和功能增强。
|
1月前
|
开发框架 自然语言处理 JavaScript
babel 原理,怎么写 babel 插件
【10月更文挑战第23天】要深入理解和掌握如何编写 Babel 插件,需要不断实践和探索,结合具体的项目需求和代码结构,灵活运用相关知识和技巧。你还可以进一步扩展和深入探讨各个方面的内容,提供更多的实例和细节,以使文章更加丰富和全面。同时,关注 Babel 插件开发的最新动态和研究成果,以便及时了解其发展和变化。
|
4月前
|
JavaScript
postcss pxtorem 配置
【8月更文挑战第9天】
|
6月前
|
JavaScript 前端开发 API
你好,babel
你好,babel
|
7月前
|
编解码 JSON JavaScript
babel的学习
babel的学习
45 0
Babel6 如何升级 7 #60
Babel6 如何升级 7 #60
441 0
|
JavaScript 前端开发 编译器
什么是 Babel?
什么是 Babel?
161 0
什么是 Babel?
|
JSON 自然语言处理 JavaScript
浅谈babel原理
很早之前就听同事分享了babel原理,其核心就是 AST(Abstract Syntax Tree),今天将自己所了解的知识点简单整理记录一下。