es6总结(一) ——开发环境

最新推荐文章于 2025-08-23 23:21:14 发布

weixin_30535913

最新推荐文章于 2025-08-23 23:21:14 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：http://www.cnblogs.com/paradise-zzz/p/8485152.html

本文详细介绍如何使用Babel将现代JavaScript(ES6)代码转换为浏览器广泛支持的经典JavaScript(ES5)代码。通过创建项目目录结构、配置.babelrc文件及package.json脚本来实现自动化编译流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们使用Babel把ES6编译成ES5

安装方法：

　　　　a.先建立一个项目的工程目录，并在目录下边建立两个文件夹：src和dist

- - src：书写ES6代码的文件夹，写的js程序都放在这里。
  - dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件

　　　　 b.写一个index.html

　　　　c.在src写一个index.js

　　　　d.安装命令：

1. 1. 1 npm init -y
  2. 全局安装 npm install -g babel-cli
  3. 本地安装babel-preset-es2015 和 babel-cli　 npm install --save-dev babel-preset-es2015 babel-cli
  4. 在根目录下新建.babelrc文件，并打开写入代码　　
```
1 {
2     "presets":[
3         "es2015"
4     ],
5     "plugins":[]
6 }
```
  5. 简化转换的命令（此时转换命令为babel src/index.js -o dist/index.js）

　　　　　　　　　打开package.json文件，把文件修改成下面的样子。　　　　　　　

 1 {
 2   "name": "es6",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "build": "babel src/index.js -o dist/index.js"
 8   },
 9   "keywords": [],
10   "author": "",
11   "license": "ISC",
12   "devDependencies": {
13     "babel-cli": "^6.24.1",
14     "babel-preset-es2015": "^6.24.1"
15   }
16 }