简单搭建es6编译环境

进行环境部署之前需安装node.js

第一步，搭建项目目录
创建两个文件夹
dist：存放es6源码
js：存放es5代码

dist文件下新建init.js文件插入测试代码

let a = 'hello es6';
console.log(a)

项目根目录新建index.html 并加载js目录下的代码，进行测试

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ES6环境搭建</title><script src="./js/init.js"></script>
</head>
<body>
</body>
</html>

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

第二步，初始化项目
在安装Babel之前，需要用npm init先初始化我们的项目。打开终端或者通过cmd打开命令行工具，进入项目目录，输入下边的命令：

npm init -y

-y代表全部默认同意，就不用一次次按回车了。

命令执行完成后，会在项目根目录下生产package.json文件。

{"name": "es6","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC"
}

第三步，安装环境
全局安装Babel-cli：在终端中输入以下命令；

npm install -g babel-cli

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

npm install --save-dev babel-preset-es2015
npm install --save-dev babel-cli

安装完成后，我们可以看一下我们的package.json文件，已经多了devDependencies选项。

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

第四部，新建.babelrc

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

这个文件我们建立完成后，执行一下命令就可以进行ES6转化为ES5的语法。

babel dist/init.js -o js/init.js

第五步，简化转化命令：
打开package.json文件，把文件修改成下面的样子。

{"name": "es6","version": "1.0.0","description": "","main": "index.js","scripts": {"build": "babel dist/init.js -o js/init.js"},"keywords": [],"author": "","license": "ISC","devDependencies": {"babel-cli": "^6.24.1","babel-preset-es2015": "^6.24.1"}
}

修改好后，以后我们就可以使用 npm run build 来进行转换了

简单搭建es6编译环境相关推荐

利用gulp搭建less编译环境
什么是less? 一种动态样式语言. LESS 将 CSS 赋予了动态语言的特性,如变量, 继承, 运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Fi ...
Webpack搭建ES6开发环境步骤
Webpack搭建ES6开发环境步骤第一步安装模块 1.创建package.json文件手动配置 npm init 自动配置 npm init -y 2.安装webpack和webpack-cl ...
ubuntu16.04基于eclipse搭建px4编译环境+Jlink调式
ubuntu16.04基于eclipse搭建px4编译环境+Jlink调式) ubuntu16.04基于eclipse搭建px4编译环境+Jlink调式一.工具获取 1.eclipse 2.jlin ...
【刚好遇见Kotlin】使用Kotlin开发——搭建Kotlin 编译环境
使用Kotlin开发--搭建Kotlin 编译环境这篇博文主要帮助大家搭建Kotlin的开发环境. Hello world 当我们准备kotlin的第一个程序HelloWorld时,我们首先要去下载 ...
java编译环境_搭建java编译环境
搭建java编译环境一.java编译环境 1.准备工作: 下载 jdk-7u79-linux-x64.tar.gz 压缩包解压 tar zxf jdk-7u79-linux-x64.tar.gz ...
window下搭建qnx编译环境
引言 window下搭建qnx编译环境流程说明 1. 前置条件说明 1.1 安装cmake 下载地址(https://cmake.org/files/v3.18/ 的make-3.18.1-win6 ...
MinGW安装与环境变量配置和Sublime Text 3搭建C++编译环境
一.MinGW在Windows中的安装与配置: MinGW MinGW(Minimalist GNU For Windows)是个精简的Windows平台C/C++.ADA及Fortran编译器,相比 ...
Ubuntu上搭建Android编译环境（1）
外网信号不好,所以把google的原文介绍扒到这里来参考. https://source.android.com/setup/ Android 源代码 Android 是一个针对多种不同设备类型打造的 ...
如何搭建modem编译环境
[DESCRIPTION] (1)MT6577以及之前的chip平台(如MT6575,73等) 的modem编译环境和MTK的Feature Phone的编译环境一样,即Windows+RVCT (2 ...
开整水果爱疯开发 - Ubuntu 10.10 下搭建 Objective-c 编译环境搭建
一直想研究下时下火热的iphone开发,苦于囊肿羞涩弄不起苹果的本本,也就一直搁浅.感谢万能的google,顺便也感谢下百度,还要感谢VM的(为我使用的是破解版,而深深自责下),我在VM虚拟机里装上了 ...

简单搭建es6编译环境

简单搭建es6编译环境相关推荐

最新文章

热门文章