将ECMAScript6语法转换成ECMAScript5语法

港控/mmm° 2022-04-17 00:47 276阅读 0赞

### 文章目录 ###

*  将ECMAScript6语法转换成ECMAScript5语法
 *   *  转换原因
     *  所需依赖
 *  修改源码
 *  运行结果

# 将ECMAScript6语法转换成ECMAScript5语法 #

## 转换原因 ##

由于并不是所有的浏览器都支持`es6`语法，但是基本上都支持`es5`语法，因而我们的项目在上线时有时需要将开发过程中的`es6`语法转换成`es5`语法发布，而这就是我写这篇文章的目的。

这篇文章是在上一篇文章的源码基础上进行修改的，上一篇文章的地址如下：

*  [webpack-dev-server实现项目热部署][webpack-dev-server]

## 所需依赖 ##

将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

运行结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70]

如图所示，我们在使用`es6`语法时，页面项目成功的将其转换成`es5`语法，并将其展示了出来。

[webpack-dev-server]: https://blog.csdn.net/ZZY1078689276/article/details/83927920
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70]: /images/20220417/3b0ba98517364575b53c7af5041ab09a.png