babel编译

babel编译

bable编译主要是为了兼容更低版本的浏览器而生；

方法1：（不建议，编译慢）

在更低版本如IE7及以下，甚至不支持引入的browser.min.js中的某些语法;

直接引入方式

方法2：编译js

需要下载先node，再下载babel(==browser.min.js);

npm是node的资源管理器

项目以xm为例

1.打开项目(xm)，在命令行下进入到此项目；

执行npm init y<-此为在该项目中创建一个名为packge.json

2.安装一些包(cmd下)

执行[c]npm i @babel/core @babel/cli @babel/preset-env D

@babel/core:babel的核心库，用bable必须要有它；

@babel/cli:为babel提供命令行接口；

@babel/preset-env:预设，主要是为了在编译时是否改变某些或保留某些es6语法等；

3.修改package.json

在script中增加一条:"build":"babel src -d dest"

build:可任意名称，为在cmd(在该项目文件下)中运行此脚本命令语句；

src:存放需要编译的js的目录

-d:输出

dest:编译好的js的放置目录处

句意：在src中把编译出来的js放到名为dest目录中；这里主要是为了在让编译的过程更简单，而不至于每次都需要run babel .....；

4.新增目录.babelrc(重要)：指定预设，即对于那些es6语法需要编译，或保留；

{
  "presets":[
    "@babel/preset-env"
  ]
}
//"@babel/preset-env"指定使用环境(babel默认)预设的来编译；

5.测试

5-1：在src中新建一个js文件(为了更加明显，需要为含有es6语法)；

5-2：在cmd中执行:npm run build;

执行完成后，就会在dest中产生一个已经编译好的js文件；

PS：若需要兼容更老版本，在第二步中再执行:npm i @babel/polyfill，可以理解为为那些更老的没有某种现有的方法或关键字提供给这些浏览器。

 

更详细想自己理解参见教程：https://www.bilibili.com/video/BV1wt411t7hg?p=3

自己学习总结出来，不当之处望指出。

我的个人网站https://www.rfbynet.club