是否有一些解决方法可以使 requireJS 指向与别名捆绑的 webpack 模块？

Question

以下是用于解释目的的伪配置文件：

webpack.config

...
entry: {
    'animals': 'index' 
}
...

index.js

import * as Wolfs from './path/to/dogs';
import * as Tigers from './path/to/cats';
export {
  Wolfs,
  Tigers
}

RequireJS的配置

require.config( {
    ...
    'paths': {
        'dogs-requireJS-moduleID' : './path/to/dogs',
        'cats-requireJS-moduleID' : './path/to/cats',
        'animals-webpack-bundle'  : 'path/to/animals/bundle'           
     },
    'map': {
        '*': {
            'dogs-requireJS-moduleID': 'animals-webpack-bundle',
            'cats-requireJS-moduleID': 'animals-webpack-bundle'
         }
   });

依赖模块

import * as JohnDogs from 'dogs-requireJS-moduleID'; //This now points to animals-webpack-bundle 
JohnDogs.doStuff();

为了使Dependent 模块工作，必须将代码重写为JohnDogs.Wolfs.doStuff() ，因为 Dogs 是使用别名 Wolfs 导出的。 我的问题是是否有一些解决方法可以使代码工作而不必重写它。

希望能很好地解释我的问题。 提前致谢。

Answer 1

您不需要 requireJS 来创建别名。 您可以像这样在 webpack 中执行此操作（将此代码段插入 webpack.config.js 文件中）

 const path = require("path"); ///... webpack config resolve: { extensions: [".ts", ".tsx", ".js", "jsx", ".json"], alias: { components: path.resolve(__dirname, "src/components/"), models: path.resolve(__dirname, "src/models/"), pages: path.resolve(__dirname, "src/pages/"), src: path.resolve(__dirname, "src/"), }, },

请注意，如果您使用的是 Typescript，您还需要在 tsconfig.json 中写入别名：

 //... compilerOptions "paths": { "components/*": ["src/components/*"], "pages/*": ["src/pages/*"], "src/*": ["src/*"] },

然后，您可以像这样导入文件：

 import Slider from "components/form/slider"

最后但同样重要的是，别名应指向入口点，例如components或assets 。 不要将它们指向您的示例中的特定文件，否则您最终会得到数千个条目，它只是不可扩展。