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
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);
调用：
node index.js
