版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ZZY1078689276/article/details/83931792
将ECMAScript6语法转换成ECMAScript5语法
转换原因
由于并不是所有的浏览器都支持es6
语法,但是基本上都支持es5
语法,因而我们的项目在上线时有时需要将开发过程中的es6
语法转换成es5
语法发布,而这就是我写这篇文章的目的。
这篇文章是在上一篇文章的源码基础上进行修改的,上一篇文章的地址如下:
所需依赖
将ECMAScript6语法转换成ECMAScript5语法所需要的依赖有:
babel-core
babel-loader
babel-preset-es2015
babel-plugin-transform-runtime:这个包主要是在打包.vue组件页面中的es6语法需要
修改源码
package.json
源码:
在控制台中执行下述指令将所需依赖打入package.json
中。
cnpm i babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev
为了避免版本号的不同可能带来出现不同结果的情况,所以说我这里贴一下完整的代码。
{
"name": "csspackage",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 4009"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"css-loader": "^1.0.1",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^0.5.8",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.0"
}
}
webpack.config.js
源码:
在webpack.config.js
中的loader
中添加如下代码:
,{
test:/\.js$/ //将.js文件中的es6语法转换成es5语法
,loader:'babel-loader'
,exclude:/node_modules/ //nodejs依赖库中的js文件全部都不需要进行转换
}
在与plugins
同级的地方添加如下代码:
,babel:{
presets:['es2015'] //配置将es6语法转换成es5语法
,plugins:['transform-runtime'] //这句代码就是为了解决打包.vue文件不报错
}
添加后的完整源码为:
var htmlwp = require('html-webpack-plugin');
module.exports = {
entry:'./src/main' //指定打包的入口文件
,output:{
path:__dirname + '/dist'
,filename:'build.js'
}
,module:{
loaders:[
{
test:/\.css$/
,loader:'style-loader!css-loader'
}
,{
test:/\.scss$/
,loader:'style-loader!css-loader!sass-loader'
}
,{
test:/\.less/ //打包.less文件
,loader:'style-loader!css-loader!sass-loader!less-loader'
}
,{
test:/\.(png|jpg|gif|ttf)$/ //打包url请求的资源文件
,loader:'url-loader?limit=20000' //limit表示图片的大小为40k是临界值,小于20k的图片均被
// 打包到build.js中去,此时图片的显示就会很快,这是一个优化操作。
}
,{
test:/\.js$/ //将.js文件中的es6语法转换成es5语法
,loader:'babel-loader'
,exclude:/node_modules/ //nodejs依赖库中的js文件全部都不需要进行转换
}
]
}
,babel:{
presets:['es2015'] //配置将es6语法转换成es5语法
,plugins:['transform-runtime'] //这句代码就是为了解决打包.vue文件不报错
}
,plugins:[
new htmlwp({
title:'首页' //生成的页面标题
,filename:'index.html' //webpack-dev-server在内存中生成的文件名称,自动将build注入到这个页面底部,
,template:'index.html' //根据index.html这个模版来生成(这个文件请程序员自己生成)
})
]
};
main.js
源码:
将页面中的require
关键字替换成import
,比如说下面替换后的结果为:
import '../assets/css/site.css';
import '../assets/css/site1.scss';
import '../assets/css/site2.less';
import addObj from './calc';
当我们想使用addObj
中的add
方法时,我们的用法为:
res.value = addObj.add(val1,val2);
calc.js
源码:
其源码导出的方式由之前的
module.exports = add;
变更为:
export default {
add //在es6中当属性名称和属性值变量同名时可以只写一个,其相当于es5: add:adds
}
运行结果
在控制台中输入下面的指令启动项目:
npm run dev
运行结果:
如图所示,我们在使用es6
语法时,页面项目成功的将其转换成es5
语法,并将其展示了出来。