admin 管理员组文章数量: 1184232
Babel
一、Babel 是什么
1. 认识 Babel
- Babel 是 JavaScript 的编译器，用来将 ES6 的代码，转换成 ES6 之前的代码。
- 官网：Babel · The compiler for next generation JavaScript
- 在线编译：Babel · The compiler for next generation JavaScript
2. 使用 Babel 的在线编译
- 使用Babel在线编译为es2015。
3. 解释编译结果
- Babel 本身可以编译 ES6 的大部分语法，比如 let、const、箭头函数、类。
- 但是对于 ES6 新增的 API，比如 Set、Map、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign/Array.from）都不能直接编译，需要借助其它的模块。
- Babel 一般需要配合 Webpack 来编译模块语法。
二、使用 Babel 前的准备工作
1. 什么是 Node.js 和 npm
- Node.js 是个平台或者工具，对应浏览器。
npm：node 包管理工具。
2. 安装 Node.js
- 官网：Node.js。
- 各种版本的下载地址：Index of /dist/。
- 安装完成后，可以在命令行工具中检查Node.js 与 npm 的版本。
三、Babel 的使用方式
- Babel 的使用方式有很多种可以通过官网的Setup页面进行查看。
- 一般在命令行工具（ CLI ）或 Webpack 中使用 Babel。
四、在命令行工具中使用 Babel 编译 ES6 代码
第一步：选择在命令行工具中使用 Babel
第二步：根据文档提示，在本地安装 Babel CLI
1. 查看项目文件夹中是否有 package.json 文件，若没有通过 npm init 初始化项目进行创建。
- ① 在项目文件夹中打开命令行工具。
- ② 输入：npm init ，根据提示的信息可以修改name，其他信息可以不修改直接回车后即可。
- ③ 命令执行完成后会在该文件夹中生成 package.json 文件，内容如下：
2. 项目初始化完成后，根据文档继续安装 Babel 需要的包。
- 不添加版本号默认安装最新的版本。
npm install --save-dev @babel/core @babel/cli
- 使用@+版本号，可以指定包的安装版本。
npm install --save-dev @babel/core@7.11.0 @babel/cli@7.10.5
- ① 这里我们使用 npm install --save-dev @babel/core @babel/cli 命令安装最新版本。
- ② 安装完成后，package.json文件中会多出相关的依赖。
第三步：添加编译的命令
1. 在 package.json 文件的 "scripts" 中添加执行 babel 的命令："build": "babel src -d lib"。
- "babel src -d dist" 完整写法是 "babel src --out-dir dist"。
- 其中src代表原始文件夹（需要提前创建），dist代表编译后保存的文件夹（不需要提前创建会自动生成）。
2. 现在可以在终端中运行： npm run build ，这里只是测试该命令是否能够执行，想要完成编译还需要添加一个Babel包。
第四步：创建 babel.config.json 配置文件
1. 安装@babel/preset-env，命令为：npm install @babel/preset-env --save-dev 。
2. 创建 babel.config.json 配置文件，并添加：{ "presets": ["@babel/preset-env"] } 。
3. 最后再次执行编译命令 ： npm run build 。
4. 编译后的结果。
本文标签： Babel
版权声明：本文标题：Babel 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687434032a102104.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论