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

原文链接：https://www.mk2048.com/blog/blog.php?id=h0jibjjihb1j&title=es6%E6%80%BB%E7%BB%93%28%E4%B8%80%29+%E2%80%94%E2%80%94%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83

我们使用Babel把ES6编译成ES5

安装方法：

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

 

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

　　　　  b.写一个index.html

　　　　c.在src写一个index.js

　　　　d.安装命令：

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 }

　　　　　　　　　　此时，命令为  npm run build 

 

更多专业前端知识，请上【猿2048】www.mk2048.com