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[^<]*(?:(?!</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);

　　

调用：

node index.js