babel 使用npm安装使用

虽然现在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文件夹

发布了116 篇原创文章 · 获赞 64 · 访问量 7482

猜你喜欢

转载自blog.csdn.net/yunchong_zhao/article/details/104068518