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中的模块：

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

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＆＃39;优化器而不是重新发明轮子。

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

1 个答案: