搭建一个ES6开发环境
2017-09-12 16:59
609 查看
一、首先先建立一个项目工程目录,并在目录下建立两个文件夹:src和dist
src:书写ES6代码的文件夹,写的js程序都放在这里。
dist:利用Babel编译成的ES5代码的文件夹,在HTML页面需要引入的时这里的js文件。
文件建好后,在src根目录下新建一个index.html文件
二、在src和dist文件下的js文件中都编写:
三、初始化项目
进入该目录,打开cmd命令行工具 先初始化我们的项目,输入 :
-y代表全部默认同意,就不用一次次按回车了。命令执行完成后,会在项目根目录下生产package.json文件。
可以根据自己的需求,修改name或者author值
四、全局安装Babel-cli
五、本地安装 bable-preset-es2015 和 babel-cli
安装完成后,可以看到package.json文件,多出了devDependencies选项
六、在根目录下新建.babelrc文件
七、建立完成后,就可以成功将ES6转化为ES5语法了,在cmd输入
效果图展示:
PS:简化转化命令:
打开package.json,将文件修改成这样
修改好后,以后我们就可以在cmd中使用 npm run build 来进行转换了。
目录如下:
src:书写ES6代码的文件夹,写的js程序都放在这里。
dist:利用Babel编译成的ES5代码的文件夹,在HTML页面需要引入的时这里的js文件。
文件建好后,在src根目录下新建一个index.html文件
二、在src和dist文件下的js文件中都编写:
三、初始化项目
进入该目录,打开cmd命令行工具 先初始化我们的项目,输入 :
npm init -y
-y代表全部默认同意,就不用一次次按回车了。命令执行完成后,会在项目根目录下生产package.json文件。
{ "name": "es6", "version": "1.0.0", "description": "ECMASript2016", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "hezihao", "license": "ISC" }
可以根据自己的需求,修改name或者author值
四、全局安装Babel-cli
npm install -g babel-cli
五、本地安装 bable-preset-es2015 和 babel-cli
npm install --save-dev babel-preset-es2015 babel-cli
安装完成后,可以看到package.json文件,多出了devDependencies选项
"devDependencies": { "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1" }
六、在根目录下新建.babelrc文件
{ "presets":[ "es2015" ], "plugins":[] }
七、建立完成后,就可以成功将ES6转化为ES5语法了,在cmd输入
babel src/index.js -o dist/index.js
效果图展示:
PS:简化转化命令:
打开package.json,将文件修改成这样
修改好后,以后我们就可以在cmd中使用 npm run build 来进行转换了。
目录如下:
相关文章推荐
- 《Orange’s 一个操作系统的实现》1.搭建操作系统开发环境
- 用 Ubuntu 搭建一个 Ruby on Rails 本地开发环境
- eclipse开发cocos2dx 3.2环境搭建之中的一个: Android C\C++环境搭建(ndk r9d)
- RocketMQ:一个纯java的开源消息中间件--开发测试环境搭建
- 搭建一个开发环境还挺容易
- 研究实验1_搭建一个精简的C语言开发环境(包含部分经典的前言)
- 如何成为一个游戏制作人——第二章:如何开始你的编程(开发环境搭建、C++语言适应)
- Struts2开发环境搭建,及一个简单登录功能实例
- 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo
- 在开发环境中,自己搭建一个ssl环境(小例子)
- cocos2dx开发之搭建一个高效的调试环境(Android平台)
- ES6的开发环境搭建
- 4000 搭建一个完整的Java开发环境
- 手把手教你搭建ES6的开发运行环境
- 《Orange’s 一个操作系统的实现》1.搭建操作系统开发环境
- 在centos 6.6 上搭建一个简单的php的开发环境
- ES6的开发环境搭建
- 用Eclipse和wxpython搭建一个Python Gui程序开发环境
- 搭建一个开发Predix软件的Windows系统(4)配置Java开发环境
- 如何搭建一个最佳的SharePoint开发环境