框架工程项目-Webpack 中如何配置 Babel

要在Webpack框架的工程项目中配置Babel，以实现对ES6+语法的支持和代码转换，您可以遵循以下步骤进行配置：

前提条件

• 确保您的项目中已安装了webpack和babel-loader。如果未安装，可以通过npm或yarn进行安装：

  npm install --save-dev webpack babel-loader @babel/core @babel/preset-env
  

具体步骤

步骤一：创建Babel配置文件

在项目根目录下创建一个名为.babelrc的文件（或者创建一个babel.config.js文件），用于存放Babel的配置信息。

步骤二：配置Babel预设

在.babelrc文件中，至少需要配置@babel/preset-env预设来转换ES6+语法到目标环境支持的版本。例如：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["> 1%, last 2 versions, not dead"]
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

或者，在babel.config.js中：

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ["> 1%, last 2 versions, not dead"],
        },
        useBuiltIns: 'usage',
        corejs: 3,
      },
    ],
  ],
};

步骤三：修改Webpack配置

在Webpack的配置文件（通常是webpack.config.js）中，添加规则来使用babel-loader处理JavaScript文件。示例如下：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.jsx?|tsx?$/, // 匹配.js, .jsx, .ts, 和 .tsx 文件
        exclude: /node_modules/, // 排除node_modules中的文件
        use: {
          loader: 'babel-loader', // 使用babel-loader进行转换
        },
      },
      // ...其他规则
    ],
  },
  // ...其他配置
};

注意事项

• 兼容性：通过@babel/preset-env的targets选项确保转换后的代码与目标浏览器环境兼容。
• 核心库支持：使用corejs指定使用的Core-js版本，以支持新语言特性和API。
• 按需加载Polyfill：设置useBuiltIns: 'usage'可以让Babel根据实际用到的特性自动引入必要的polyfill。

通过以上步骤，您就可以在Webpack项目中成功配置Babel，从而支持并转换现代JavaScript语法，确保代码在不同环境下的兼容性。