面试题：JavaScript ES6模块兼容性优化中的构建工具应用

使用Webpack优化ES6模块兼容性

配置要点
- entry：指定项目入口文件，例如entry: './src/index.js'，这是整个项目打包的起点，该文件可能包含一系列ES6模块的导入。
- output：定义输出文件的路径和名称，如output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }。path指定输出目录，filename是输出文件名。
- module：用于处理各种类型的模块。对于ES6模块中的JavaScript代码，需要使用babel-loader来将ES6语法转换为ES5等更兼容的语法。配置如下：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset - env']
        }
      }
    }
  ]
}

这里test指定匹配.js文件，exclude排除node_modules目录，babel-loader使用@babel/preset - env预设来进行语法转换。@babel/preset - env可以根据目标环境自动确定需要转换的语法。 - resolve：帮助Webpack解析模块路径。例如，可以配置别名来简化模块导入路径，如：

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

这样在导入模块时可以使用import { someFunction } from '@/utils'，而不是相对路径导入。 2. 插件使用 - html - webpack - plugin：用于生成HTML文件并自动引入打包后的JavaScript文件。安装后配置如下：

const HtmlWebpackPlugin = require('html - webpack - plugin');
module.exports = {
  //...其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

它会根据指定的模板src/index.html生成一个新的HTML文件，并将打包后的bundle.js引入其中。 - clean - webpack - plugin：在每次构建前清理输出目录，避免旧文件残留。安装后使用如下：

const { CleanWebpackPlugin } = require('clean - webpack - plugin');
module.exports = {
  //...其他配置
  plugins: [
    new CleanWebpackPlugin()
  ]
}

使用Rollup优化ES6模块兼容性

配置要点
- 输入输出：通过input指定入口文件，output定义输出。例如：

export default {
  input:'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife' // 可根据需求选择合适的格式，iife适合浏览器环境
  }
}

format指定输出的模块格式，iife（立即执行函数表达式）适合在浏览器中直接使用。 - 插件配置：Rollup需要插件来处理ES6到ES5的转换。@rollup/plugin - babel插件用于此目的。安装并配置如下：

import babel from '@rollup/plugin - babel';
export default {
  input:'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    babel({
      exclude: 'node_modules/**',
      presets: ['@babel/preset - env']
    })
  ]
}

这里同样使用@babel/preset - env预设，exclude排除node_modules目录。 2. 插件使用 - @rollup/plugin - commonjs：如果项目中有CommonJS模块（例如从node_modules引入的一些模块），需要此插件将其转换为ES6模块供Rollup处理。配置如下：

import commonjs from '@rollup/plugin - commonjs';
export default {
  input:'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    commonjs(),
    // 其他插件
  ]
}

- **@rollup/plugin - node - resolve**：帮助Rollup解析`node_modules`中的模块。配置如下：

import resolve from '@rollup/plugin - node - resolve';
export default {
  input:'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve(),
    // 其他插件
  ]
}

星途面试题库

面试题：JavaScript ES6模块兼容性优化中的构建工具应用

知识考点

面试题答案

使用Webpack优化ES6模块兼容性

使用Rollup优化ES6模块兼容性