ES6开发环境配置

最新推荐文章于 2024-08-13 16:49:07 发布

chhpt

最新推荐文章于 2024-08-13 16:49:07 发布

阅读量6.7k

点赞数

分类专栏： es6

本文链接：https://blog.csdn.net/chhpt/article/details/74131380

版权

随着浏览器对ES6支持度的提升，但在某些浏览器（如IE11）中支持仍有限，因此需要转码工具。本文介绍了如何配置ES6开发环境，包括手动编译、Webstorm、VS Code的配置方法，以及Babel的使用，如babel-cli、babel-preset-env的安装和配置。此外，还提及了在浏览器环境中使用Babel的可能性和注意事项。

摘要由CSDN通过智能技术生成

随着时间的推移，浏览器对ES6支持度已经越来越高了，超过90%的 ES6 语法特性都实现了。虽然有些浏览器对ES6的支持程度已经很高了（Chrome59 97%，Safari10 99%），但是很多人使用的IE对ES6的支持任然很不理想（IE11 11%），所以在实际工程应用中，我们还需要将ES6转化成ES5。各大浏览器的最新版本，对 ES6 的支持可以查看kangax.github.io/es5-compat-table/es6/。

环境支持

Node 是 JavaScript 的服务器运行环境（runtime）。它对 ES6 的支持度更高，除了那些默认打开的功能，还有一些语法功能已经实现了，但是默认没有打开。使用下面的命令，可以查看 Node 已经实现的 ES6 特性。

node --v8-options | grep harmony

上面命令的输出结果，会因为版本的不同而有所不同。

转码

通过特定的转码器，如Babel，或在线的转换器，将ES6转换成ES5再进行部署。

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。相对于之前的Babel5，Babel6不再是一个整的大的package，而是拆分了很多个小的package可供选择安装，可以根据项目进行自定义。下面介绍Babel的开发环境的配置。

1. 命令行使用（手动编译）

安装babel-cli，支持命令行使用babel

npm install --save-dev babel-cli

完成之后，我们还不能编译ES6文件，因为 babel 不再包含任何 transform 功能，babel6里把它们作为插件（plugin）分割出去，需要我们自己定义。

安装babel-preset-env
要想编译ES6文件，我们必须安装相关的插件，babel-preset-env打包了所有用于转换ES6的插件，安装babel-preset-env:

npm install --save-dev babel-preset-env

babel还有babel-preset-es2015，babel-preset-es2016等插件，每一年的preset仅编译那一年的批准的规则，而babel-preset-env则包含es2015，es2016，es2017和latest等。

配置
安装完babel-preset-env之后，还需要一步，在package.json或.babelrc文件启用babel-preset-env:
“`
“babel”: {
“presets”: [
“env”
]
}


4. 编译
完成以上安装后，就可以编译文件了：
```shell




<div class="se-preview-section-delimiter"></div>

# 转码结果输出到标准输出
babel example.js




<div class="se-preview-section-delimiter"></div>

# 转码结果写入一个文件 --out-file 或 -o 参数指定输出文件
babel example.js --out-file compiled.js




<div class="se-preview-section-delimiter"></div>

# 转码整个目录 --out-dir 或 -d 参数指定输出目录
babel src --out-dir lib




<