单独安装Babel或者Less

Posted 2020-09-21

1、直接安装Babel法：

1）初始化自动创建package.json

npm init 

2）首先全局安装Babel。

npm install -g babel-cli

3）项目安装Babel。

npm install -g babel-cli --save-dev

4）presets字段设定转码规则，你可以根据官方提供的规则集选择需要安装。

//ES2015转码规则
npm install --save-dev babel-preset-es2015

5）Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。

{
  "presets": ["es2015"],
  "plugins": [
//    "transform-decorators-legacy",
//    "transform-class-properties"
  ]
}

 

6）转码、转码的规则

//转码结果输出到标准输出
babel test.js
 
//转码结果写入一个文件
--out-file 或 -o 参数指定输出文件
babel a.js --out-file b.js

//或者
$ babel a.js -o b.js
 
//整个目录转码
--out-dir 或 -d 参数指定输出目录
babel src --out-dir lib

//或者
babel src -d lib
 
//-s 参数生成source map文件
babel src -d lib -s

2、直接安装Less法

1）全局安装

npm install -g less

2）CMD命令行运行：编译

lessc src/less/xxx.less dist/css/xxx.css