Bable安装配置

Bable

Bable是JavaScript的编译器

把浏览器不支持的ES6新特性，变成浏览器可执行的代码

中文官网：https://www.babeljs.cn/

使用：可在线使用，可本地安装

本地安装

1、首先需要node.js环境

2、进入开发的项目目录，初始化  package.json：

npm init
//后面根据需求填写，或一路回车即可
//或者直接使用默认的初始化
npm init -y

 

3、安装bable，同样需要在该目录下进行

//逐个项目安装（官网新版写法）
npm install --save-dev @babel/core @babel/cli

//逐个项目安装（旧版写法）
npm install --save-dev babel-cli
//简写是
npm i -D babel-cli

//若安装失败可能权限不够，可以
mac用户：sudo npm install ...
windows用户：用管理员打开cmd即可

 

 4、在package.json文件下可以看到

"dependencise"下面的包 和 "devDependencise" 下面的包都是项目开发中用到的，上线的时候这些包都不需要的

 

 5、在package.json中，"scripts" 下添加

"build":"babel entry.js -o index.js -w"
//注意与上一句之间需要添加一个逗号
//-o index.js 表示将entry.js输出为一个新文件index.js
//-w 表示实时监听 entry.js ,当entry.js发生改变时，自动编译生成文件

 

 6、在项目目录下创建 entry.js 文件

 

 7、写完 entry.js 后，尝试运行。这步可以忽略

npm run build
//实际上就是运行babel entry.js ，即刚才在scripts那里写的代码
//全局安装的时候才能直接使用 bable entry.js

 

制定转换规则

1、安装 babel-preset-env

npm i -D babel-preset-env

 

2、在项目中创建 .babelrc 文件

3、在 .babelrc 中制定规则

//新版写法
{
  "presets": ["@babel/preset-env"]
}
//旧版写法
{
　　"presets":[
　　　　"env"
　　]
}

 //还可以有更详细的制定计划：https://github.com/browserslist/browserslist

 

4、后直接使用，会自动监听，并生成文件了

npm run build

 

标签：npm,babel,配置,js,env,entry,Bable,安装
来源： https://www.cnblogs.com/mingliangge/p/12835595.html