Require.js无法识别连接JS文件中的模块

Question

为了提高性能，我将Require.js集成到基于AngularJS的web应用程序中。我在require.conf中导入了index.html：

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

下面是. is的代码片段：

    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建的图书馆。在这个文件中连接了一些插件和库。下面是webpack构建libs.js的配置代码片段。

在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);
      }),

但是，应用程序无法识别libs.js中的模块：

模块“ngquill”不可用！您要么拼错了模块名，要么忘记加载它。如果注册一个模块，请确保将依赖项指定为第二个参数。

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‘优化器的功能。我建议使用RequireJS的优化器，而不是重新发明轮子。