Bable的简单使用

个人学习,仅供参考.

第一步:node环境搭建

https://nodejs.org/zh-cn/下载并安装长期支持版.

创建项目目录,在项目目录下查看node是否安装成功

 第二步:初始化package.json

C:\project\babeltest>npm init -y

 第三步:Babel的安装包

安装babel-preset-env和babel-cli两个安装包

C:\project\babeltest> npm install --save-dev babel-preset-env babel-cli

 在package.json内可见安装的依赖包.

 第四步:创建.babelrc文件配置转码

 在编译器中创建.babelrc,设置参数,env项是借助插件babel-preset-env，这个配置说的是babel对es6,es7,es8进行转码

{
  "presets": ["env"]
}

 第五步:创建需要转码的文件夹和转码后存放的文件夹

 用src内存放es6语法代码,用dist存放转码后的代码

C:\project\babeltest>babel src/test.js -o dist/test2.js

 假如提示,babel不是内外部命令,就是路径不对.可以去设置环境变量,或者全局重新安装babel.

环境变量设置参考:

https://blog.csdn.net/weixin_45112150/article/details/114991042?ops_request_misc=&request_id=&biz_id=102&utm_term=babel%20src/test.js%20-o%20dist/test&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-.first_rank_v2_pc_rank_v29&spm=1018.2226.3001.4187

 重新安装:--global

C:\project\babeltest> npm install --global babel-cli  babel-preset-env

 安装成功:可以查看babel版本

 执行:

 第六点:其他转化方式

单个文件转化:[-o] 

babel  文件转化前路径+文件名 -o 文件转化后路径+文件名

文件夹转化 :[-d] src文件夹内所有文件转化到dist中

C:\project\babeltest>babel src -d dist

实时监控转化:[-w -d] 修改保存后就自动生成

C:\project\babeltest>babel src -w -d dist