ES6第一节：开发环境的搭建

前言：由于目前浏览器对ES6的支持度不高，需要借助babel将编写好的ES6代码转换成ES5，浏览器才能解析。

需要在NodeJS环境下运行

一. 建立结构：两个文件夹和一个html文件，分别是src和dist还有index.html，还要在src目录下新建一个index.js文件，并在index.html里将其引用进去

如： dist

src

- index.js

index.html

下面是index.html中的代码： (注意index中引用的js是dist目录下的，因为dist是编译后的js，src里的js是我们编写的es6代码)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./dist/index.js"></script>
 9 </head>
10 <body>
11     hello es6
12 </body>
13 </html>

二.初始化项目：

用 cnpm init -y

说明：cnpm是淘宝的镜像源，因为npm安装往往很慢，没有安装的朋友可以直接将下面的地址复制到命令行按回车即可安装，就能使用cnpm了，-y代表全部默认同意，就不用一次次按回车了：npm install -g cnpm --registry=https://registry.npm.taobao.org

三.安装Babel相关：

1.全局安装 babel-cli

cnpm install babel-cli -g

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

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

四.根目录下新建：.babelrc 文件，并打开编辑：

1 {
2     "presets":[
3         "es2015"
4     ],
5     "plugins":[]
6 }

•上面4大步配置好后，此时我们到src目录下的index.js文件中尝试编写ES6语法的js代码:

1 let msg = "hello es6";
2 console.log(msg);

编写完后我们最后一步就是编译了，接下来就是见证奇迹的时候了，打开终端，定位到当前目录，这里推荐使用Visual Studio Code编辑器，会自动定位到当前目录：

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

这时到dist目录下去看，你会发现多了一个index.js的文件，并且里面的代码就是刚刚src目录下的index.js文件编译后的es5代码：

1 "use strict";
2
3 var msg = "hello es6";
4 console.log(msg);

至此，ES6的运行环境搭建完成并且运行成功！

总结：1建立目录结构

2初始化当前项目

3安装babel编译工具

4编译打包：babel src/index.js -o dist/index.js

小技巧：简化编译打包命令：打开根目录的package.json文件，将"srcipt"下添加一段代码：

以后编译打包直接用： npm run build 就可以了，不用 babel src/index.js -o dist/index.js 一长串这么麻烦

1   "scripts": {
2     "build": "babel src/index.js -o dist/index.js"
3   }

转载于:https://www.cnblogs.com/herxondon/p/10301446.html

ES6第一节：开发环境的搭建相关推荐

python 论坛搭建_Python第一课 - python的开发环境的搭建
Python第一课 - python的开发环境的搭建一.下载安装Python的安装包打开官网 https://www.python.org/downloads/windows/ 下载中心 [标记为 ...
《python 与数据挖掘》一1.3　Python开发环境的搭建
本节书摘来自华章出版社<python 与数据挖掘 >一书中的第1章,第1.3节,作者张良均杨海宏何子健杨征,更多章节内容可以访问云栖社区"华章计算机"公众号查看 ...
EJB3.0开发环境的搭建
EJB Container的介绍 SUN公司正式推出了EJB的规范之后,在众多的公司和开发者中引起了非常大的反响.标志着用Java开发企业级应用系统将变的非常easy.很多公司都已经推出了或正打算EJ ...
ESP32开发环境的搭建和 ESP-IDF支持以下调试方法
ESP32开发环境的搭建 ESP-IDF 支持以下调试方法: 一. JTAG 二. GDB调试三. 日志系统四. Core Dump 五. esp32 heap 内存管理简析 ESP32开发环境的 ...
PHP开发环境的搭建
第三节实验一 PHP开发环境的搭建本实验对Windows95及其以上版本的Windows操作系统机器通用. 0.实验目的 (1)能够快速部署Windows下的开发环境,满足学习,使用PHP对于开发 ...
Ubuntu20.04下嵌入式 Qt 开发环境的搭建(适用于Tiny6410)
Ubuntu 下 Tiny6410 嵌入式 Qt 开发环境的搭建目录导航 Ubuntu 下 Tiny6410 嵌入式 Qt 开发环境的搭建前言 1.安装前的准备工作 2.安装交叉编译器 3.安装t ...
Windows平台上iPhone基于cygwin开发环境的搭建方法
cygwin 開發平台(windows版 iPhone SDK) http://www.iphonetw.net/books/unofficialdev/cygwintoolchain Windows ...
Java开发环境的搭建以及使用eclipse从头一步步创建java项目
原文:出自本人的Linux博客http://blog.csdn.net/unix21/article/details/18813173 一.Java 开发环境的搭建这里主要说windows环境下怎么 ...
Java开发环境的搭建以及使用eclipse创建项目
一.Java 开发环境的搭建这里主要说windows环境下怎么配置Java环境.如果是Linux环境参考本博客另一篇文章即可: Linux环境安装卸载JDK 1.首先安装JDK java的SDK简称 ...
微信小程序开发系列一：微信小程序的申请和开发环境的搭建
我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序 ...

ES6第一节：开发环境的搭建

ES6第一节：开发环境的搭建相关推荐

最新文章

热门文章