單獨安裝Babel或者Less

一、直接安裝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

二、直接安裝Less法

1）全局安裝

npm install -g less

2）CMD命令行運行：編譯

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