天天看點
傳回

JS文法轉換-ES6轉ES5

1.使用Babel轉碼

　　全局安裝

npm install -g babel-cli

　　布局安裝

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

　　

Babel的配置檔案是.babelrc，存放在項目的根目錄下。使用Babel的第一步，需要配置這個檔案。

{
  "presets": [],
  "plugins": []
}

點選此處到Babel中文官網presets配置頁面：​​Babel Plugins​​

# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015
 
# react轉碼規則
$ npm install --save-dev babel-preset-react
 
# ES7不同階段文法提案的轉碼規則（共有4個階段），選裝一個
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

　　根據自己需要 将配置檔案修改

{
    "presets": [
      "es2015"
    ],
    "plugins": []
  }

　　然後在指令行開始轉es5

# 轉碼結果寫入一個檔案
# --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

忽略某些檔案進行轉碼

# 忽略layui檔案價 進行轉碼 
$ babel pc/es6js --out-dir pc/js --ignore pc/es6js/layui

#dir 是檔案夾 file 是單獨檔案

2.gulp

　　安裝gulp

npm install gulp --save-dev

　　安裝gulp的轉碼工具 babel

npm install --save-dev gulp-babel

　　安裝完成後 會發現package.json中

{
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2"
  }
}

　　編寫gulpfile.js檔案，設定任務 轉碼

var gulp = require("gulp");
var babel = require("gulp-babel");
 
gulp.task("default", function () {
  return gulp.src("src/a.js")
    .pipe(babel())
    .pipe(gulp.dest("lib"));
});

　　在指令行輸入，src檔案夾中的a.js已經被轉碼成ES5标準的a.js。（在了lib檔案夾）

gulp

　　

　​​還有一個連結介紹es5的功能的​​

3.将html内得script标簽得es6轉換為es5

　　一般情況下html和js是分開，但也有很少的寫在html中得js ，這裡用node.js fs對象操作檔案，通過require(path)寫入新檔案 達到es6轉換es5得目的

const fs = require('fs');
const {
  promises
} = require('dns');
require('@babel/register');

// 清空檔案夾
function delDir(path) {
  let files = [];
  // existsSync 如果路徑存在，則傳回 true，否則傳回 false。
  if (fs.existsSync(path)) {
    // readdirSync 可選的 options 參數可以是字元串（指定字元編碼）、或具有 encoding 屬性（指定用于傳回的檔案名的字元編碼）的對象。 如果 encoding 被設定為 'buffer'，則傳回的檔案名會作為 Buffer 對象傳入。
    files = fs.readdirSync(path);
    files.forEach((file, index) => {
      let curPath = path + "/" + file;
      // 使用 fs.statSync(fullPath).isDirectory() 來判斷是否是檔案目錄
      if (fs.statSync(curPath).isDirectory()) {
        //  如果目前路徑存在 則 周遊 并删除 主要針對于 檔案夾 下的檔案夾
        delDir(curPath); //遞歸删除檔案夾
      } else {
        //  同步的删除檔案或符号連結
        fs.unlinkSync(curPath); //删除檔案
      }
    });
    //  遞歸的删除
    fs.rmdirSync(path);
  }
}
//删除了all
delDir('./all/')
//  建立了all
fs.mkdir('./all/', function (err) {});
// 處理檔案中的html檔案
function handleHtml(path, distUrl) {
  // 讀取目錄中的html檔案
  fs.readFile(path, function (err, data) {
    // 比對js正則
    let reg = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/g;
    // js字元串 将每個script 變成數組的一個元素 
    let scrptArr = data.toString().match(reg) || ['<script> </script>'];
    // html css字元串 除了script以外的html内容
    let htmlStr = data.toString().replace(reg, '');

    // 生成 script 
    mostScriptJoinHtml(scrptArr, 0, path, '', distUrl, htmlStr)

  });
}
//  生成script 轉後的代碼
function mostScriptJoinHtml(scrptArr, i, path, Es6ChangeEs5AllJs, distUrl, htmlStr) {
  let res = scrptArr[i]
  // 删除的script标簽
  let sliceStr = res.match(/^<script[^>]*\>/);
  // 删除script之後的js
  res = res.slice(sliceStr[0].length, res.length - 9)
  // 轉換成Es6ChangeEs5
  res = 'module.exports={Es6ChangeEs5() {' + res + '}};'
  // 檔案名
  let newPath = path.replace(/\/|\./g, '_')
  // 純js檔案位址
  let newAllPath = './all/' + newPath + i + '.js';
  // all 寫入js檔案
  fs.writeFile(newAllPath, res, function (err) {
    // require轉es5
    let a1 = require(newAllPath);
    let jsStr = a1.Es6ChangeEs5.toString().slice(25, a1.Es6ChangeEs5.toString().length - 1)
    // console.log(a1.Es6ChangeEs5.toString()==="function Es6ChangeEs5() {
  //   var a = [1, 23, 45, 67, 89, 0, 10];
  //   var b = [];
  //   a.forEach(function (v) {
  //     b.push(v);
  //   });
  // }")
    jsStr = sliceStr + jsStr + '</script>'
    Es6ChangeEs5AllJs += jsStr
    if (i >= scrptArr.length - 1) {
      // 寫入str
      let Es6ChangeEs5Str = htmlStr + Es6ChangeEs5AllJs
      fs.writeFile(distUrl, Es6ChangeEs5Str, function (err) {});
    } else {
      i++
      mostScriptJoinHtml(scrptArr, i, path, Es6ChangeEs5AllJs, distUrl, htmlStr)
    }

  })
}

// 複制檔案
let copy = function (src, dst) {
  //同步讀取目前目錄
  let paths = fs.readdirSync(src);
  paths.forEach(function (path) {
    let _src = src + '/' + path;
    let _dst = dst + '/' + path;
    //stats 該對象 包含檔案屬性
    fs.stat(_src, function (err, stats) {
      if (err) throw err;
      if (stats.isFile()) { //如果是個檔案則拷貝

        let fileNameHtmlReg = /\.html|\.htm/g;
        let fileNameJsReg = /\.js/g;
        // 判斷檔案類型
        if (fileNameHtmlReg.test(_src)) {
          // html檔案 處理html檔案内容
          handleHtml(_src, _dst)
        } else if (fileNameJsReg.test(_src)) {
          // js 直接寫入檔案
          // console.log('find  js:', _src);
          let readable = fs.createReadStream(_src); //建立讀取流
          let writable = fs.createWriteStream(_dst); //建立寫入流
          readable.pipe(writable);
        } else {
          // css img 直接寫入檔案
          let readable = fs.createReadStream(_src); //建立讀取流
          let writable = fs.createWriteStream(_dst); //建立寫入流
          readable.pipe(writable);
        }
      } else if (stats.isDirectory()) { //是目錄則 遞歸
        // 檔案夾 則繼續遞歸
        checkDirectory(_src, _dst, copy);
      }
    });
  });
}
// 建立目錄
let checkDirectory = function (src, dst, callback) {
  fs.access(dst, fs.constants.F_OK, (err) => {
    if (err) {
      fs.mkdirSync(dst);
      callback(src, dst);
    } else {
      callback(src, dst);
    }
  });
};
const NeedUrl = './html'; //源目錄
const DistUrl = './dist'; //輸出
delDir(DistUrl)
checkDirectory(NeedUrl, DistUrl, copy);

　　

JS文法轉換-ES6轉ES5

調用：

node index.js

js html gulp 遞歸
上一篇: 小程式 公衆号/h5互相跳轉-webview
下一篇: nvm的使用nvm的使用（win系統）nvm的介紹第一步，下載下傳nvm

繼續閱讀