ES6学习之环境配置

环境配置

一、建立工程目录

新建dist文件夹（用于存放转化的es5文件）、新建src文件夹（用于存放es6文件），在该文件夹下建立index.js文件

二、编写index.html

在根目录下新建index.html文件,引入index.js。

注意：需要注意的是在引入js文件时，引入的是dist目录下的文件。

<script src="/dist/index.js"></script>

三、初始化项目

npm init -y   //-y代表全部默认同意，就不用一次次按回车了。命令执行完成后，会在项目根目录下生产package.json文件。

//package.json内容，可以根据自己的需要修改
{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

三、安装Babel-cli

npm install -g babel-cli  // 全局安装bebel-cli

npm install --save-dev babel-preset-es2015 babel-cli //本地安装babel-preset-es2015 和 babel-cli

安装完成后package.json 中多了devDependencies选项。

"devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }

在根目录下新建.babelrc文件，并打开录入下面的代码

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

现在就可以通过运行

babel src/index.js -o dist/index.js

在dist文件下生成es5语法的index.js

四、简化命令：

在学习vue 的时候，可以使用npm run build 直接利用webpack进行打包，在这里也希望利用这种方式完成转换。打开package.json文件，把文件修改成下面的样子。

{
  "name": "dou",
  "version": "1.0.0",
  "description": "dou",
  "main": "index.js",
  "scripts": {
    "build": "babel src/index.js -o dist/index.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

之后运行npm run build 就可以转化了。