标签：npm babel 配置 js env entry 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。