分享更有价值
被信任是一种快乐

小程序要将es6转es5的原因是什么

文章页正文上

这篇文章主要讲解了“小程序要将es6转es5的原因是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“小程序要将es6转es5的原因是什么”吧! 为了浏览器兼容。ES6作为JS的新规范,加入了很多新的语法和API,但现代浏览器对ES6新特性支持度不高,所以需将ES6代码转为ES5代码。在微信web开发者工具中,会默认使用babel将开发者ES6语法代码转换为三端都能很好支持的ES5的代码,帮助开发者解决环境不同所带来的开发问题;只需要配置勾选好“ES6转ES5”选项即可。小程序将es6转es5的原因原因:为了浏览器兼容,以及为了在node.js环境可以顺畅运行应用程序。ES6作为JS的新规范,加入了很多新的语法和API,但现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。将ES6代码转为ES5代码,只需在项目中安装和配置好Babel工具即可。在 node.js 环境中,node 对 ES6 的支持一直被诟病,到了 13 版本之后,才出了模块模式(在 package.json 中增加一句:“type”: “module”),但有些库仍然不支持 ES6 语法。因此,如果你的 node.js 程序遇到不认识 ES6 语法的时候,请使用 Babel 转码一下也许就能解决问题。小程序中将es6转es5在 0.10.101000 以及之后版本的开发工具中,会默认使用 babel 将开发者 ES6 语法代码转换为三端都能很好支持的 ES5 的代码,帮助开发者解决环境不同所带来的开发问题。在项目中,勾选ES6转ES5选项即可需要注意的是:为了提高代码质量,在开启 ES6 转换功能的情况下,默认启用 javasctipt 严格模式,请参考 “use strict”Babel是一个 ES6 转码器,能将 ES6 代码转为 ES5 代码,这样原本不支持ES6的老版本浏览器执行ES6代码,举例:ES6箭头函数
代码示例:

//转码前:使用了ES6箭头函数
items.map(item=>item+1);

//转码后:转为了普通函数
items.map(function(item){
returnitem+1;
});

下面我们写出在命令行使用 Babel 的过程,让你清楚转译过程的全部内容。1. 在项目中安装 Babel 的命令行工具

$npminstall-Dbabel-cli

2. 准备 ES6 代码通常我们把源代码放在 src 目录下,如果你没有现成的 ES6 代码,那就在 src 目录下创建一个:

//src/example.js

classHello{

staticworld(){

console.log('Hello,World!');

}

}

Hello.world();

3. 配置 BabelBabel 是通过插件和预设值(preset)来转译代码(因此它可以转译的不只是 ES6)。为了转译 ES6 为 ES5,我们只需要配置 env 预设值就可免费云主机、域名以了,安装这个插件:

$npminstall-Dbabel-preset-env

我们还需要一个配置文件,在项目根目录下创建文件:.babelrc.,内容如下:
该文件用来设置转码规则和插件,基本格式如下。

//.babelrc

{

"presets":[],

"plugins":[]

}

注意.babelrc.是前后都有一个点,这样就可以保存成功了presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。

$npminstall--save-dev@babel/preset-env

$npminstall--save-dev@babel/preset-react

然后,将这些规则加入.babelrc。
代码示例:

{

"presets":[

"@babel/env",

"@babel/preset-react"

],

"plugins":[]

}

注意,以下所有 Babel 工具和模块的使用,都必须先写好.babelrc。Babel 提供命令行工具@babel/cli,用于命令行转码。它的安装命令如下。

$npminstall--save-dev@babel/cli

基本用法如下。

#转码结果输出到标准输出
$babeltest.js

#转码结果写入一个文件
#--out-file或-o参数指定输出文件
$babela.js--out-fileb.js
#或者
$babela.js-ob.js

#整个目录转码
#--out-dir或-d参数指定输出目录
$babelsrc--out-dirlib
#或者
$babelsrc-dlib

#-s参数生成sourcemap文件
$babelsrc-dlib-s

基本用法如下。
@babel/node模块的babel-node命令,提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能,而且可以直接运行 ES6 代码。首先,安装这个模块。

$npminstall--save-dev@babel/node

然后,执行babel-node就进入 REPL 环境。

然后,执行babel-node就进入 REPL 环境。

$npxbalel-node

@babel/register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用 Babel 进行转码。

$npminstall--save-dev@babel/register

使用时,必须首先加载@babel/register。

//index.js

require('@babel/register');

require('./es6.js');

然后,就不需要手动对index.js转码了。

$nodeindex.js

需要注意的是,@babel/register只会对require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。

@babel/register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用 Babel 进行转码。
然后,就不需要手动对index.js转码了。
需要注意的是,@babel/register只会对require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。
Babel 也可以用于浏览器环境,使用@babel/standalone模块提供的浏览器版本,将其插入网页。

注意,网页实时将 ES6 代码转为 ES5,对性能会有影响。生产环境需要加载已经转码完成的脚本。感谢各位的阅读,以上就是“小程序要将es6转es5的原因是什么”的内容了,经过本文的学习后,相信大家对小程序要将es6转es5的原因是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是云技术,小编将为大家推送更多相关知识点的文章,欢迎关注!

相关推荐: node.red工具怎么使用

这篇“node.red工具怎么使用”文章的知识点大部分人都不太理解,所以小编免费云主机、域名给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“node.red工具怎么使用”文章吧。 node…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册