使用requireJS优化器保持高效图的jQuery依赖性 [英] Preserving jQuery dependency for highcharts with requireJS optimizer

问题描述

我正在测试requireJS，并试图使用highcharts制作一个简单的项目。我已经开始使用 requireJS多页面示例项目作为起点。

我的dir结构看起来与基本结构相同，在lib目录中添加了highstock.js。

• page1.html ：应用的第1页。


• page2.html ：应用的第2页。
>

• js
  
  
  
  • 应用：用于存储应用特定模块的目录。
  
  
  • lib ：用于存放第三方模块的目录，如jQuery。 common.js ：包含requirejs配置，它将成为这组通用模块的构建
    目标。
  
  
  • page1.js ：用于数据-main为page1.html。加载共同的
    模块，然后加载 app / main1 ，第1页的主要模块。 page2.js ：用于page2.html的data-main。加载公共的
    模块，然后加载第2页的主模块 app / main2 。
    
  / ul>
  
  

  common.js拥有配置，并且为highstock添加了一个垫片：
  
  

    requirejs.config（{
  aseUrl：'js / lib'，
   paths：{
   app：'../app'
  }，
   bim：{
  highstock：{
  exports：Highcharts，
  deps：[jquery] 
  }，
  } / / end Shim配置
  }）; 
    

  我也使用基础构建文件，并增加了一行来设置common.js为
  
  

   优化：none，
   mainConfigFile：'../www /js/common.js'，
    

  在apps / main1.js中，我添加了一个 var HighCharts = require（'highstock'）; 然后我尝试使用它。

  
  
  

  当我在正常构建一切正常。所有的依赖关系都保存着，一切都会加载。
  
  

  当我尝试优化我的构建时，highcharts不会收到jQuery依赖关系。我想我明白了为什么它会发生，但我不知道如何解决它。

  
  
  

  我的构建创建了3个文件，common.js，page1.js和page2 .js文件。

  
  
  

  构建输出的相关部分：
  
  

    js / lib /../common.js 
   ---------------- 
   js / lib /../ common.js 
   js / lib / jquery .js 
   ... 
   
   js / lib /../ page1.js 
   ---------------- 
   js / lib /../ page1.js 
   js / lib / highstock.js 
   js / app / main1.js 
   ... 
    

  然后我的页面引用内置的page1。当它试图加载highstock模块时出错，因为jQuery尚未加载/无法访问。

  
  
  

  当我看到构建的page1时，我可以看到原因。

    require（['./ common']，function（common）{
   require（['app / main1 ']）; // highcharts位于未优化版本
  }的main1中; 
   
   define（../ page1，function（）{}）; 
   //多一些定义
   
  （function（）{//开始highcharts模块定义HERE 
    

  因此，在通用（包括jQuery）被加载后，它不是在回调中定义的，而是在提交请求之后，但在执行回调之前加载。

  
  
  

  我的问题是，为什么会发生这种情况而不是在回调中（这是在非优化版本中加载的地方）。我已经尝试了build.js文件和配置文件中的多个选项，我似乎错过了一些关键概念或小错误。

  
  
  

  抱歉，超长的问题，但我觉得所有的信息是必要的。如果需要更多的信息，我可以发布它或者摆脱了多余的东西。

  解决方案

  不确定你是否仍然参与该项目或不：

  
  
  

  我发现你没有将路径定义为 highcharts 在上面的代码库中，我看不到它即使在你提到的回购中也是如此。

  
  
  

  同样， highcharts 可以防止重新声明这个名字空间，所以你必须使用不同的名称
  - 因此，您必须在使用不同的名称时使用不同的名称

  
  
  

  注意： code> highcharts 可以在不使用填充的情况下安全地用于amd模块中（除非需要显式访问由它导出的对象）。
  
  

  因此，您的配置文件应如下所示：
  
  

    requirejs.config（{ 
   baseUrl：'js / lib'，
   paths：{
   app：'../app'，
  'highstock-custom-name'：'path / to / highcharts .js'
  }，
   shim：{
  highstock-custom-name：{
   ... //原样，虽然没有必要
  } 
  } 
  }）; 
    

  
  

  I'm testing out requireJS and am trying to make a simple project using highcharts. I've started with the requireJS multipage example project as a starting point.

  My dir structure looks the same as the base structure, with highstock.js added in the lib directory.

  • page1.html: page 1 of the app.
  • page2.html: page 2 of the app.
  • js
    • app: the directory to store app-specific modules.
    • lib: the directory to hold third party modules, like jQuery.
    • common.js: contains the requirejs config, and it will be the build target for the set of common modules.
    • page1.js: used for the data-main for page1.html. Loads the common module, then loads app/main1, the main module for page 1.
    • page2.js: used for the data-main for page2.html. Loads the common module, then loads app/main2, the main module for page 2.

  common.js holds the configuration and I've added a shim for highstock there:

  requirejs.config({
      baseUrl: 'js/lib',
      paths: {
          app: '../app'
      },
      shim: {
          "highstock": {
              "exports": "Highcharts",
              "deps": [ "jquery"] 
          },
      } // end Shim Configuration
    } );
  

  I also am using the base build file, with the addition of a line to set common.js as the config file and another to disable minifying.

  optimize: "none",
  mainConfigFile: '../www/js/common.js',
  

  In apps/main1.js I've added a var HighCharts= require('highstock'); and I then try to use it.

  When I run this in the normal build everything works fine. All the dependencies hold and everything loads.

  When I attempt to optimize my build, highcharts doesn't receive the jQuery dependency. I think I see why its happening, but I'm not sure how to fix it.

  My build creates 3 files, common.js, page1.js, and page2.js.

  The relevant parts of the build output:

  js/lib/../common.js
  ----------------
  js/lib/../common.js
  js/lib/jquery.js
  ...
  
  js/lib/../page1.js
  ----------------
  js/lib/../page1.js
  js/lib/highstock.js
  js/app/main1.js
  ...
  

  My page then references the built page1. When it attempts to load the highstock module it errors out since jQuery has not yet been loaded/isn't accessible.

  When I see the built page1 I can see why.

  require(['./common'], function (common) {
      require(['app/main1']); //highcharts is in main1 in the non-optimized version
  });
  
  define("../page1", function(){});
  //a few more defines
  
  (function () { // start highcharts module definition HERE
  

  So instead of being defined in the callback after common (including jQuery) has been loaded, its loaded after making the request, but before the callback executes.

  My question is, why is this happening there instead of inside the callback (which is where it is loaded in the non-optimized version). I've tried multiple options in the build.js file and config file and I seem to be missing some key concept or small error.

  Sorry for the super long question but I felt all the info was necessary. If more info is needed I can post it, or get rid of something superfluous.

  解决方案

  Not sure you're still involved with the project or not:

  I see that you've not defined the path to the highcharts library in the code above. I could not see it even in the repo you mentioned.

  And, again, highcharts prevents re-declaration of this namespace, so you must use a different name - Hence, you must use a different name while shim-ming it

  Note: Libraries like highcharts can be safely used in an amd module without using a shim (unless you need explicit access to the object exported by it).

  So, your Config File should look like this:

  requirejs.config({
      baseUrl: 'js/lib',
      paths: {
          app: '../app',
          'highstock-custom-name': 'path/to/highcharts.js'
      },
      shim: {
          "highstock-custom-name": {
            ... //as is, although not necessary
          }
      }
  });
  

  这篇关于使用requireJS优化器保持高效图的jQuery依赖性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！