使用babel转换高版本的js 更好的兼容一些设备

前段时间一直在做移动端的东西我很多都是使用es6的语法

最后在实际环境测试的时候发现人家的设备根本就不识别我的那些语法

这个时候你就有俩个选择要不转换成低版本要不重新使用低版本js重新书写代码

显然第二种方法不到万不得已我们是绝不会去选择使用低版本代码重构的

这就让我思考了一个问题虽然 es6新增的很多东西确实很方便但是有些时候要考虑兼容低版本的问题

你就要慎重使用es6的语法了

好了废话不多说了

我还是喜欢使用简单的例子来说明问题

1.首先在桌面上建立一个空的文件夹我就叫做babel(前提是你得安装node和有npm)

进去babel文件夹里面打开命令行窗口 shift+鼠标右键有一个打开powershell的东西打开

有的电脑可能不让使用这个命令窗口执行命令为了电脑的安全他默认是禁止的如果你想要的打开我之前的博客有关于怎么解开可以去前面搜索一下

2.安装各种执行包

首先先初始化项目

npm init 一路回车到底会看见一个文件夹中生成了一个 package.js文件

npm install babel-cli --save-dev //安装本地当然你也可以全局安装 -g

npm install babel-preset-es2015 --save-dev //这个你也可以全局安装但是不建议毕竟生产环境中并不确定你的js是哪个版本最好还是在项目中安装

我是转换es6版本的js所以使用的是es2015版本的

最后在你的package.json文件中在下面会出现这俩个东西就说明你安装成功了

"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1"
}

3.配置 .babelrc文件

在文件babel中创建一个 .babelrc 这个是babel的配置文件 window是不让窗口点号开头的文件夹

你可以通过一个编辑文件另存为进行创建

//改成下面这样就可以

{
"presets": [
"es2015"
],
"plugins": []
}

4.修改package.json文件还差最后一步

在package.json文件中的scripts 中加上"build": "babel src -d lib" src是要解析的文件夹 lib是放解析后的js的文件夹

你可以吧解析的js文件放到 src文件夹中最后在 lib中取出你想的js文件中

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib"
},

5.测试

我们在babel文件中创建一个 src文件和lib文件

在src文件创建一个es6.js文件书写出下面的代码

setTimeout(()=>{console.log('Hello World')}) //使用es6的箭头函数

最后在命令行窗口执行 npm run build

下面是在lib文件夹中的 es6.js下的代码看吧已经转换成了 es5的代码格式箭头函数转换成了普通的函数

'use strict';

setTimeout(function () {
console.log('Hello World!');
}, 3000);

使用babel转换高版本的js 更好的兼容一些设备相关推荐

CAD文件低版本怎么转换高版本
我们在工作当中需要CAD格式的素材,但是在网上下载的CAD文件版本过低不兼容,使得这些素材我们不好使用,这时候我们需要将它转换成高一点的版本,那么CAD文件低版本怎么转换高版本呢? 这里小编就用在线转 ...
Win7系统安装高版本node.js
windows7系统安装node.js最高版本目前只支持13.14 如果要安装13.14以上的版本,需要进行以下操作从官网下载高版本的压缩版,如.zip https://nodejs.org/dis ...
Solidworks高版本如何转换为低版本
前言 Solidworks是一款广受欢迎的三维CAD软件.由于技术的不断进步和软件的更新迭代,使用高版本的Solidworks软件制作的三维模型文件无法在低版本的软件中打开.这给工程师和设计师带来了不 ...
CAD图纸如何从低版本转换成高版本
我今天在绘制CAD图纸的时候突然发现,换个电脑后绘制好的CAD图纸打不开了.之后分析才发现是之前绘图的时候,保存的CAD图纸版本过低.这就需要把CAD图纸从低版本转换成高版本.今天小编就在这里给大家演 ...
abaqus高版本的cae文件无法在低版本运行怎么办？别急，两种方法帮你解决问题！
方法一: 低版本和高版本的cae文件虽然不兼容,但inp文件兼容,只需高版本job模块 write input即可生成inp文件,在低版本中,点击File-import-model,选择inp文件格式 ...
MACbook安装双系统，启动转换助理提示“需要64位windows10或更高版本的ISO文件”
MACbook安装双系统,启动转换助理提示"需要64位windows10或更高版本的ISO文件" 1,MACbook为2018年后15.6寸 2,使用了2019年windows会出 ...
cad高版本怎么转换成低版本？这个办法挺实用
CAD软件是工程师.建筑师和设计师等专业人员最常用的工具之一.随着时间的推移,CAD软件的版本也在不断更新.但是,有时候你可能会遇到需要将CAD高版本转换为低版本的情况,比如在与其他人员合作时,他们使 ...
node 16.X 或更高版本 fibers 出错 is missing.
** node 16.X 或更高版本 fibers 出错 ** 网上找了好久都说是 node版本的问题之前确实运行这个项目是没问题的也确实是升级node之后才产生的这个问题; 报错 *node_m ...
教您MAYA 高版本文件转换低版本方法
近日不停的有会员说为什么下载的模型打不开!有的因为模型错误!有的因为版本不对! 请大家善于看论坛的新手帮助!而不是一味的傻问! 现在将网上搜集的方法公布给大家!(含插件) 方法一: 这个版本转换的问题 ...

使用babel转换高版本的js 更好的兼容一些设备

使用babel转换高版本的js 更好的兼容一些设备相关推荐

最新文章

热门文章