webpack7——转换es6模块

最新推荐文章于 2022-01-14 10:39:37 发布

原创最新推荐文章于 2022-01-14 10:39:37 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

15 篇文章

订阅专栏

博客介绍了将ES6或更高级语法转换成ES5的方法。因浏览器不能识别ES6，需用Babel转换。先将开发模式设为development，安装相关依赖并在module中设置。还介绍了ES6高级语法设置，如类语法用特定插件，装饰性语法需安装并设置对应插件。

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

背景：如何把es6或者更高级的语法转换成es5，需要用babel，如果不进行转换，打包的时候依然会是es6，浏览器不能识别。
1.将开发模式设置为development模式
2.安装babel-loader和@babel/core,@babel/core,@babel?preset-env
3.在module中进行设置

module:{//模块
        rules:[
         {test:/\.js$/,
        use:{
            loader:'babel-loader',
            options:{  //用babel-loader需要把es6转换成es5
                presets:[
                    '@babel/preset-env'
                ]

            }
        }}
        }
      }

2.es6高级语法设置

1.对于下图中所示的类语法，应该使用 “@babel/plugin-proposal-class-properties” 这个插件

//index.js
class A{
    a=1;
}

“@babel/plugin-proposal-class-properties” 具体用法

//webpack.config.js
{test:/\.js$/,
        use:{
            loader:'babel-loader',
            options:{  //用babel-loader需要把es6转换成es5
                presets:[
                    '@babel/preset-env'
                ],
                plugins:[
                    '@babel/plugin-proposal-class-properties'
                ]
            }
        }}

2.对于如下图所示的装饰性语法

在这里插入代码片

(1)安装插件 @babel/plugin-proposal-decorators

npm install --save-dev @babel/plugin-proposal-decorators

（2）设置

{test:/\.js$/,
        use:{
            loader:'babel-loader',
            options:{  //用babel-loader需要把es6转换成es5
                presets:[
                    '@babel/preset-env'
                ],
                plugins:[
                  ["@babel/plugin-proposal-decorators", { "legacy": true }],
                    ["@babel/plugin-proposal-class-properties", { "loose" : true }]
                ]
            }
        }}