[JavaScript知识库]怎么在前端工程化项目中对js高级语法进行一个转化？babel

谈到高级js语法转换，自然是离不开babel

webpack": “^5.66.0”
这个webpack版本其实是可以处理css中url路径的 而且也可以解析高级的js语法

如果不能处理这些高级的js语法在项目工程化中处理步骤

1. 安装babel转换器相关的包： npm i babel-loader @babel/core @babel/runtime -D
2. 安装babel语法插件相关的包: npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3. 项目根目录中，创建babel配置文件 babel.config.js并初始化配置如下:

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: ['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

4. 在webapack.config.js 的加载器配置规则中配置如下

// exclude 为排除项 表示babel-loader 不需要处理node_modules中的js文件
{test: /\.js$/,use:'babel-loader',exclude: /node_modules/}