Require.js 无法识别串联 JS 文件中的模块

Question

我正在将 Require.js 集成到基于 AngularJS 的 Web 应用程序以提高性能。我在 index.html:

中导入了 require.conf

<script src="bower_components/requirejs/require.js" data-main="require-conf.js">

这是 require-conf.js:

的代码片段

    require.config({
            paths: {
                    'jquery': '...', 
                    'Angular': '...',
                    ....
                    'libs' : 'src/libs.js'
            },
            shim: {
                    'Angular': { exports: 'Angular'},
                    'libs' : ['Angular']
                    .... 
            }
    }

   require(
         [
              'jquery',
              'angular',
              'app',
              'libs',

          ], function (jquery, angular) {
            angular.bootstrap(['app'])
        }
     );

这里，libs.js是我用webpack搭建的库。一些插件和库连接在这个文件中。这是构建 libs.js.

的 webpack 配置代码片段

在webpack.config.js

plugins: [
    new ConcatPlugin({
      fileName: 'libs.js',
      filesToConcat: [
        './src/utils/bootstrap-plugins.min.js',
        './src/libs/angular-bootstrap-datetimepicker/datetimepicker.js',
        './src/libs/angular-bootstrap-datetimepicker/datetimepicker.templates.js',
        './src/libs/angular-fusioncharts/fusioncharts.js',
        './src/libs/angular-fusioncharts/angular-fusioncharts.min.js',
        './src/libs/angular-fusioncharts/types/fusioncharts.charts.js',
        './src/libs/angular-ui-tour/angular-ui-tour.js',
        './src/libs/JQ_CONFIG/flot/jquery.flot.js',
        './src/libs/JQ_CONFIG/flot/jquery.flot.pie.js',
        './src/libs/JQ_CONFIG/flot/jquery.flot.resize.js',
        './src/libs/JQ_CONFIG/flot-spline/js/jquery.flot.spline.min.js',
        './src/libs/JQ_CONFIG/flot.orderbars/js/jquery.flot.orderBars.js',
        './src/libs/JQ_CONFIG/flot.tooltip/js/jquery.flot.tooltip.min.js',
        './src/libs/JQ_CONFIG/footable/dist/footable.all.min.js',
        './src/libs/JQ_CONFIG/html5sortable/jquery.sortable.js',
        './src/libs/jquery-ui-draggable/jquery-ui-draggable.min.js',
        './src/libs/ng-table/ng-table.js',
        './src/libs/StickyTableHeaders/jquery.stickytableheaders.js',
        './src/libs/ng-quill/quill.js',
        './src/libs/ng-quill/ng-quill.js',
      ].map(function(fileName) {
        return path.resolve(__dirname, fileName);
      }),

但是，App无法识别里面的模块libs.js:

Module 'ngquill' is not available! you either misspelled the module name or forgot it to load it. If registering a module ensure that you specify the dependencies as the second argument.

Require.js无法识别webpack拼接的模块？有解决这个问题的方法吗？

Answer 1

您不能仅通过将 AMD 模块连接到一个文件中来将它们合并到一个文件中。当您将多个模块合并到一个文件中时，模块必须获得硬编码名称。当您在单个文件中有一个模块时，它的 define 可以是：

define([ ... deps ... ], function (...) {

在这种情况下，RequireJS 从请求模块的名称中推断出模块的名称。

当您将多个模块合并到一个文件中时，define 调用必须采用以下形式：

define("foo", [ ... deps ...], function (...) {

define("bar", [ ... deps ...], function (...) {

// etc.

define 的第一个参数是一个字符串，它告诉 RequireJS 正在定义哪个模块。这是必要的，否则 RequireJS 将不知道哪个模块是哪个。这就是为什么你不能只是连接。

您很可能会编写一个 Webpack 配置，它既可以转换我上面描述的文件又连接它们。然而，这充满了障碍。例如，运行时 shim 配置需要在构建时进行特殊处理。最后，您可能会复制 RequireJS 的功能 optimizer。我建议使用 RequireJS 的优化器而不是重新发明轮子。

Require.js 无法识别串联 JS 文件中的模块

Require.js can't recognize modules in concatenated JS file

angularjs

requirejs

amd