webpack编译ES6代码

草样的年华

于 2021-10-24 20:22:39 发布

阅读量2.1k

点赞数

文章标签： 1024程序员节 webpack

本文链接：https://blog.youkuaiyun.com/qq_42690194/article/details/120939923

版权

本文介绍了如何通过Babel将现代JavaScript（ES6）代码转换为ES5，以确保代码在旧版浏览器中正常运行。主要步骤包括：安装babel相关依赖、创建.babelrc配置文件并设置转换规则，以及在webpack配置中加入babel-loader。通过这些步骤，开发者可以确保他们的代码在广泛范围内具备良好的浏览器兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

把es6代码转化为ES5代码，是为了让我们写的javascript代码程序能在低版本的浏览器正常运行，使用的是babel，使用步骤如下：
1、安装跟balbe相关的三个依赖。安装npm install @babel/core @babel/preset-env babel-loade --save-dev
2、安装完babel相关依赖后，要给babel创建一个配置文件，在根目录底下创建一个.babelrc文件
3、.babelrc文件里面写入以下代码
    {
        //预设：babel一系列插件的集合
        "presets":["@babel/preset-env"] //@babel/preset-env是我们刚刚安装好的依赖，在packjson.json文件里面可以找到
    }
4、配置文件写好了，我们得使用这些配置文件。在当前目录下的webpack.config.js文件中，加以下代码
    {
        module:{
                rules:[
                        test:/\.js$/,  //什么样类型的文件才使用这个规则
                        loader：['babel-loader'], //使用babel-loader去处理
                        include:path.join(__dirname.'src'), //包含那些目录下的js文件要处理
                        exclude:/node_modules/  //排除那些js文件
                    ]
               }
    }

这样就完成了我们的配置