babel 使用npm安装使用

穿精又带淫゛_ 提交于 2020-01-22 13:08:11

虽然现在es6已经很完善了,但也仅仅限于一些高级浏览器 如:谷歌 ,火狐,ie11等等

babel 可以实现高版本js往低版本转换 

使用方式 有俩种

1.使用cdn方式 引入

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

使用的时候 

<script type="text/babel"> </script >  加上 type="text/babel" 这句话 

2.使用npm安装使用(前提的本地电脑上有 node.js最新版环境)

2.1.桌面上建立一个空的文件夹 

npm  init  初始化项目文件 

2.2.安装所需要的依赖

npm i @babel/core  @babel/cli  @babel/preset-env

babel/core 转换代码  babel/cli  执行的命令环境   babel/preset-env 配置环境

2.3.在packjson 文件夹中书写配置  (提前把需要转换的代码放到src目录下  当然这个目录可以自定义的)

"build":"babel src -d dest"     //src  要转换的 代码文件存放目录     -d dest   输出的文件目录

2.4.在当前目录下 新建立一个配置文件  .babelrc  别忘了前面小点  不配置这个 默认是不会转换低版本 他根据环境判断

{
    "presets":[
        "@babel/preset-env"
    ]
}

2.5.书写玩代码后,在命令行中输入命令

npm  run build

就可以看到 当前目录下 生成了一个dest文件夹

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!