es6转换为es5的插件babel的安装与使用

tech2022-10-11  75

首先你需要有npm或者cnpm或者yarn这三种任意一种包管理器,本安装使用基于Visual Studio Code

表示在vscode的终端运行,在打开,如果在终端输入命令后报错,可能是node没有安装和配置,可以再网上随便搜就有,配置后需要重启电脑,如果以上都有,那么如下操作:

如果输入babel --version没有出现版本号,需要执行以下代码

cnpm install -g babel-cli

新建app01文件夹

进入到app01文件夹中,将当前文件夹初始化为nodejs项目

npm init 或者 npm init -y 经过一系列的操作之后,最终会创建出一个package.json文件,该文件保存了整个项目的配置信息

新建src文件夹,在src文件夹下新建a.js,在a.js文件中编写ES6代码 let a = 1; let test = () => {}

安装babel

cnpm install --save-dev babel-cli 或 cnpm install --save babel-cli –save-dev表示生产依赖,仅在项目开发时使用的依赖 –save表示产品依赖,在产品上线时也会使用的依赖

安装babel预设【转换规则】

cnpm install --save-dev babel-preset-latest

在项目的根目录下新建并配置.babelrc文件,注意有"." { “presets”:[“latest”] }

使用babel将ES6代码转换为ES5代码 在src路径 > babel a.js 在app01路径 > babel src/a.js

拓展:

只是单个文件的话 将a.js转换为ES5的代码之后生成一个b.js文件

babel a.js --out-file b.js

如果多个文件时,直接把它的父文件夹转换: 将src文件夹转换为ES5的代码之生成一个dist文件夹

babel src --out-dir dist

可以在package.json文件中进行配置 “scripts”: { “build”:“babel src --out-dir dist”, }, 之后每次在项目的根目录下执行npm run build,就可以将src进行转换然后署出dist文件夹
最新回复(0)