对客户端和服务器端使用requireJs,Grunt.js和TypeScript进行合并和缩小

时间:2013-11-28 13:09:49

标签: javascript node.js requirejs typescript gruntjs

我正在试图弄清楚我应该如何管理我的javascript文件,因为它现在真的很复杂而且它无法正常工作。 (我还没有使用requireJs但是我想)

有这种情况:

我正在构建一个Web应用程序(视频游戏),分为三个部分:

  1. game-server - 包含数据库,使用pomelo.js框架。使用         打字稿。代码源不与浏览器/ Web服务器共享         份。

  2. shared - 包含游戏和网络之间的共享代码和配置     服务器。使用TypeScript。

  3. web-server - 包含路由,使用Express.js框架,TypeScript,包含使用Pixi框架,jQuery等的引擎。

  4. 目前有几个问题:

    1. 我使用TypeScript编写代码,在OOP中,.ts文件在更改时由我的IDE在.js文件中自动转换。

    2. 生成的.js用于浏览器。

    3. 类.ts(或函数)由服务器在内部使用(如果在/共享中),并且可以从其他文件继承。

    4. 服务器端正常。没有更多的问题。这意味着我可以使用TS文件,加载它们并从Node或其他TS文件中使用它们(带有TS的节点和require()函数的module.exports或者预处理注释的类型) 使用Grunt可以使用dev / prod中的不同配置文件。生成合并然后缩小的文件:

      一个。康卡特 - http://pastebin.com/wajPVe1G

      湾Uglify - http://pastebin.com/E0EJ9VD6

      ℃。 Grunt脚本 - http://pastebin.com/GHMtReK4

      d。这个过程有点棘手,如果我使用requireJs,我可能会改变它!首先我运行concat所以我将创建几个.tmp.js文件然后我用它们.tmp.js创建几个.min.js,有时我直接生成.min.js。然后我在这些.min.js上使用uglify。

    5. 客户端(浏览器)不行。

      一个。我必须按顺序加载我的脚本,因为一些脚本必须先包含在其他脚本中,比如jquery.js,pixi.js,init文件等等。我无法使用grunt加载它们,我没有找到如何。我创建了几个* .min.js文件,我从html标签中按顺序包含它们来解决它。

      湾我对TypeScript有一些麻烦

      1. Inheritance with TypeScript doesn't works browser side

      2. 我有继承,你可以看到,所以显然我需要大量控制文件的导入

      3. 某些文件使用module.exports或exports来导出类,但它在浏览器中不存在。这里唯一的解决方案是在加载文件之前在文件中添加全局export = {}。但它很棘手,因为我看到如果导出存在,PIXI会有不同的行为!如果它确实存在,那么它将其类放在exports var中,不创建全局PIXI var并在其他地方生成错误,因为PIXI不存在。所以我必须更改一些我没写的lib或者在创建全局导出var之前加载pixi.js。真无聊。

      4. 我需要使用Grunt / requireJs进行多次配置,因为我有几个页面有多个配置,脚本不应该全部包含在内。

    6. 我认为如何解决这些问题?

      1. 不要使用concat,只使用uglify模块并生成一个 子目录如“js-built”并存储所有文件, uglified(minified)。
      2. 使用requireJs按我想要的顺序导入这些文件并连接 他们只能在浏览器上加载一个文件。
      3. 你认为它可以解决我的问题吗?因为它太大了,我在这里看不到任何东西,我没有任何requireJs的经验,只使用Grunt三天所以......

        如果你做过这类事情,请不要犹豫,分享你的经验,同时很难使用(和学习)所有节点模块。

        谢谢。

        PS:我只是意识到TypeScript需要以两种不同的模式进行编译才能在浏览器和服务器上运行......另一个问题^^

0 个答案:

没有答案