欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-05-17 14:48:41
前言：由于目前浏览器对ES6的支持度不高，需要借助babel将编写好的ES6代码转换成ES5，浏览器才能解析。 需要在NodeJS环境下运行 一. 建立结构：两个文件夹和一个html文件，分别是src和dist还有index.html，还要在src目录下新建一个index.j... ......

前言：由于目前浏览器对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"下添加一段代码：

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

-学习永无止境，大家有什么问题可以互加好友讨论：vx:herxondon

上一篇： Python类装饰器实现方法详解

下一篇： 设计模式 | 策略模式

推荐阅读