es6入门——es6环境的搭建

系统管理员 2024-04-17 14:36 86阅读 0赞

[https://blog.csdn.net/tozeroblog/article/details/80757001][https_blog.csdn.net_tozeroblog_article_details_80757001]

在参与招聘实习中，都经常被问到了不了解es6，不懂的话，真是很尴尬，目前es6也是前端之路的必会技术，所以还是开始接触吧~

es6不像es5那么简单，它需要有es5的前置知识，要懂得es5的基本语法，跟es5不同的是，es6需要搭建环境，不像es5那样直接就可以编写运行，因为有些浏览器还是不支持es6的，所以还需要babel对其进行转换，接下来就开始环境的搭建吧。

首先选择一个盘新建目录文件，我新建的是es6文件夹，在该文件夹新建一个src文件，用来存放js文件，新建一个dist文件，用来存放转换为es5语法的js文件，还有建立一个index.html文件，src下新建一个index.js文件，在index.html中加入<script src="./dist"></script>如下所示：

然后对项目进行初始化，在控制台切换到该目录下，输入"npm init -y"即生成一个package.json文件，打开文件内容，下面是对里面内容的讲解：

然后开始环境的搭建：

先输入”npm install babel-cli -g"对bebal进行全局安装，如果网速较慢，可以使用cnpm

接着再输入"npm install --save-dev babel-preset-es2015 babel-cli“，将babel-preset-es2015和babel-cli进行本地安装，安装成功后就会在package.json文件中有记录，如图：

接着新建一个.babelrc文件，在文件中输入：

这时在控制台输入"babel src/index.js -o dist/index.js"，-o表示输出，即将src下的文件index.js通过babel转换器转换后输出到dist文件夹下的index.js文件。

以下是本次的测试：

src下的index.js

dist下的index.js

为了可以简化输入语句，可以通过在package.json文件中的scripts属性进行更改：

这时只需要在控制台输入"npm run build"即可达到在控制台输入babel src/index.js -o dist/index.js相同的效果。

————————————————  
版权声明：本文为CSDN博主「tozeroblog」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/tozeroblog/article/details/80757001

[https_blog.csdn.net_tozeroblog_article_details_80757001]: https://blog.csdn.net/tozeroblog/article/details/80757001