Es6 - 环境搭建

环境搭建

1    建立项目文件夹（es6test）
      根目录下的dist  存放编译之后的js文件（index.js）
      根目录下的src 原始书写的js文件 （index.js）
      index.js 写入示例代码

let a = 1;console.log(a)复制代码

根目录下的index.html ， 引入dist 下的index.js 文件

<script src="./dist/index.js" ></script>复制代码

2      初始化项目
cmd 中 npm init -y  ，完成之后根目录下生成package.json

{
  "name": "es6test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}复制代码

       *** -y 是 表示全部同意，不需要每一次按回车同意命令。

3     全局安装 babel-cli

cnpm install -g babel-cli复制代码

4     本地安装babel-preset-es2015 和 babel-cli

cnpm install --save-dev babel-preset-es2015 babel-cli复制代码

完成之后 package.json 文件

{  "name": "es6test",   名字  "version": "1.0.0",   版本  "description": "这是一个es6的学习",   描述  "main": "index.js",  入口  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"   命令  },  "keywords": [],  "author": "Rain",  作者  "license": "ISC",  "devDependencies": {  环境    "babel-cli": "^6.26.0",    "babel-preset-es2015": "^6.24.1"  }}复制代码

5     新建   .babelrc 文件 

根目录下新建，写入代码

{  "presets":[    "es2015"    本地安装的babel-preset-es2015  ],   "plugins": []   插件}复制代码

6     命令转化
cmd 输入 babel src/index.js -o dist/index.js 

注 ： 在输入以上命令的之前保证 3 ~ 5 步骤 全部完成

7    简化命令
在package.json 的script 中修改代码

{  "name": "es6test",  "version": "1.0.0",  "description": "这是一个es6的学习",  "main": "index.js",  "scripts": {    "build": "babel src/index.js -o dist/index.js"      },  "keywords": [],  "author": "Rain",  "license": "ISC",  "devDependencies": {    "babel-cli": "^6.26.0",    "babel-preset-es2015": "^6.24.1"  }}复制代码

然后在cmd 中 使用 npm run build  就可以成功编译 js 文件

编译之后的文件在 dist 目录中 
index.js 

"use strict";var a = 1;console.log(a);复制代码

环境搭建成功！

转载于:https://juejin.im/post/5d09e35fe51d455a694f953b