使用RequireJS生成捆綁包時出現問題

Question

我有一個Typescript項目：

myproject
 |
 +-src (folder)
 |  |
 |  +-main.ts
 |  +-stringHandler.ts
 |  +-disposable.ts
 +-out (folder)
 |  |
 |  +-...
 +-Gruntfile.js

在我的Grunt配置中，我有一個兩步任務，該任務將編譯myproject/src/所有.ts文件，並將相應的.js文件生成到myproject/out/ 。 因此，任務的第一步完成后，我將得到以下內容：

myproject
 |
 +-out (folder)
    |
    +-main.js
    +-stringHandler.js
    +-disposable.js

捆綁

該任務的第二步是生成捆綁文件 myproject.js 。 我為此使用RequireJS 。

我已經安裝了grunt-contrib-requirejs 。 處理捆綁任務的Gruntfile.js文件如下（僅顯示文件中的相關部分）：

module.exports = function(grunt) {
  var config = {
    pkg: grunt.file.readJSON('package.json'),
    requirejs: {
      compile: {
        options: {
          baseUrl: "out",
          bundles: {
            'myproject': ['main', 'stringHandler', 'disposable']
          },
          out: 'out/myproject.js'
        }
      }
    }
  };
  grunt.initConfig(config);
  grunt.loadNpmTasks('grunt-contrib-requirejs');
  grunt.registerTask('default', ['compile', 'requirejs']);
};

成功編譯項目后，當Grunt達到requirejs ，出現以下錯誤：

運行“ requirejs：compile”（requirejs）任務{[錯誤：錯誤：在Function.build.createConfig（C：\\ Users \\ myuser \\ Documents \\ myproject \\ node_modules中缺少“名稱”，“包含”或“模塊”選項\\ grunt-contrib-requirejs \\ node_modules \\ requirejs \\ bin \\ r.js：29567：19）] originalError：[錯誤：缺少“名稱”，“包含”或“模塊”選項]}

我可以理解缺少參數，但是使用name會遇到其他錯誤。 我想在更一般的層面上一定有問題。 正確的配置格式是什么？ 謝謝

Answer 1

假設main.ts是應用程序的入口點，並且它包含帶有應用程序依賴項（庫和require.config節。

首先，將require.config部分移出main.ts並移入其自己的文件config.ts 。 將應用程序引導程序代碼保留在main.ts 。

然后確定要在何處部署此優化的應用程序代碼。 假設它位於名為build的目錄中，該目錄與src和out文件夾平行。

更新您的Gruntfile以反映此配置：

requirejs: {
    compile: {
        options: {
            baseUrl: "out",
            mainConfigFile: "out/config.js",
            modules: [
                { name: "main" }
            ],
            dir: "build",
            optimize: "none" // skip compression while debugging
        }
    }
}

您可以在http://requirejs.org/上了解有關每個配置選項的更多信息，但這是基本的摘要：

• baseUrl ：源JS代碼所在的位置。
• mainConfigFile ：指向上述配置對象。 它告訴插件依賴項在哪里。 這樣就無需在兩個地方指定和手動更新依賴項列表。
• modules ：是應用程序引導程序的數組。 在這種情況下，一個清單main.js
• dir ：將在其中生成優化的應用程序。 請注意，您的依賴項也將在此處復制。
• optimize ：我取消了此操作，因此您可以在./build下輕松調試生成的應用程序。 滿意時將其刪除，該插件將優化（壓縮和壓縮）您的構建文件。