面试题：JavaScript模块加载器与打包工具之专家难度

解决模块加载兼容性问题

使用Webpack或Rollup：这两个工具都能处理不同的模块加载规范。以Webpack为例：
- 安装依赖：npm install webpack webpack - cli --save - dev
- 配置文件：在Webpack配置文件（webpack.config.js）中，利用module规则来处理不同类型的模块。例如，对于ES6 Modules，默认即可处理；对于AMD模块，可以使用amd-loader。

module.exports = {
    //...其他配置
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'amd - loader',
                include: /path/to/amd - modules/
            }
        ]
    }
};

自定义加载器：如果项目有特殊需求，可以编写自定义的加载器。例如，编写一个将AMD模块转换为ES6 Modules的加载器。
- 创建加载器文件：如amdToEs6Loader.js。
- 在加载器中处理代码转换：通过AST（抽象语法树）来解析和转换AMD模块代码为ES6 Modules代码。例如，使用@babel/parser和@babel/traverse来处理。

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generate = require('@babel/generator').default;

module.exports = function (source) {
    const ast = parser.parse(source, {
        sourceType: 'module'
    });
    traverse(ast, {
        CallExpression(path) {
            if (path.node.callee.name === 'define') {
                // 处理AMD define函数的逻辑，转换为ES6 import/export
            }
        }
    });
    return generate(ast).code;
};

运行时加载器：在运行时，可以使用SystemJS这样的加载器。它支持多种模块格式，包括ES6 Modules、AMD、CommonJS等。
- 引入SystemJS：在HTML中引入SystemJS的脚本。

<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.13.2/system.js"></script>

- **配置SystemJS**：通过`System.config`方法来配置模块的路径、格式等。

System.config({
    map: {
        // 模块映射
    },
    packages: {
        // 包配置
    }
});

优化打包流程

代码拆分：利用Webpack或Rollup的代码拆分功能，将子应用的代码拆分成更小的chunk。例如，在Webpack中使用splitChunks插件。

module.exports = {
    //...其他配置
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

Tree - shaking：确保Webpack或Rollup开启Tree - shaking功能，以去除未使用的代码。在Webpack中，设置mode为'production'即可默认开启。

module.exports = {
    mode: 'production'
};

缓存控制：在打包过程中，给输出的文件添加哈希值，以便浏览器更好地缓存资源。在Webpack中，可以通过output.filename配置。

module.exports = {
    output: {
        filename: '[name].[contenthash].js'
    }
};

资源合并与压缩：使用插件如MiniCssExtractPlugin来合并和压缩CSS，使用terser - webpack - plugin来压缩JavaScript代码。

const MiniCssExtractPlugin = require('mini - css - extract - plugin');
const TerserPlugin = require('terser - webpack - plugin');

module.exports = {
    //...其他配置
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css - loader']
            }
        ]
    },
    optimization: {
        minimizer: [
            new TerserPlugin()
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
};

确保资源不冲突

命名空间：在代码层面，为各个子应用的全局变量、函数等添加命名空间。例如，将子应用A的全局函数doSomething改为appA_doSomething。
CSS模块化：使用CSS Modules或Shadow DOM来确保子应用的CSS样式不冲突。对于CSS Modules，在Webpack中配置css - loader的modules选项。

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style - loader',
                    {
                        loader: 'css - loader',
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    }
};

资源隔离：在打包过程中，将不同子应用的资源输出到不同的目录，然后在部署时，确保这些目录在服务器上的路径是隔离的。例如，子应用A的资源输出到/appA/dist，子应用B的资源输出到/appB/dist。

星途面试题库

面试题：JavaScript模块加载器与打包工具之专家难度

知识考点

面试题答案

解决模块加载兼容性问题

优化打包流程

确保资源不冲突