环境搭建
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-clicnpm 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);复制代码
环境搭建成功!