如何通过AMD在打字稿需要的jQuery(How to require jquery via AMD

2019-06-18 11:27发布

站内文章 / 移动开发
9 0 0

我如何要求对我的打字稿模块jquery的AMD模块。 例如假设脚本的目录结构如下所示： 


    jquery-1.8.2.js
    jquery.d.ts
    module.ts
    require.js

我想从module.ts生成的js文件，要求jQuery的1.8.2.js通过require.js加载。

目前，我有： 


    import jquery = module('jquery')

这将导致名为“jQuery的”并不在当前范围存在。

Answer 1:

FOR打字稿1.7+

它看起来像标准的再次发生变化，其中低于0.9+方法仍然有效，但随着未来ES6以下模块加载都可以使用。 （参考文献： https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105 ） 

import * as $ from "jquery";

甚至部分的人

import {extend} from "jquery";

（这仍然需要jquery.d.ts，如果安装了TSD - tsd install jquery ）

安装TSD： npm install tsd -g

FOR打字稿0.9+ 

/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');

//Do your stuff

还有，如果你jquery.d.ts不定义外部模块，添加如下jquery.d.ts： 

declare module "jquery" {
    export = $;
}


Answer 2:

我想了很多解决这个问题的混乱是由于jQuery的不是真的像个外部模块，从而抑制了使用的import声明。 解决的办法很干净，简洁大方够不觉得自己像一个变通。

我已经写了一个简单的例子， 在使用打字稿及RequireJS jQuery的 ，其工作原理如下...

您抓住从类型定义绝对类型化的RequireJS和jQuery。

现在，您可以使用原始RequireJS与打字稿文件的内部静态类型。

app.ts 

///<reference path="require.d.ts" />
///<reference path="jquery.d.ts" />

require(['jquery'], function ($) {
    $(document).ready(() => {
        alert('Your code executes after jQuery has been loaded.');
    });
});

然后你只需要单一的脚本标记添加到您的网页： 

<script data-main="app" src="require.js"></script>

优势比其他解决方案？

  1. 您可以独立更新jQuery和RequireJS
  2. 你不必依靠垫片正在更新的项目
  3. 您不必手动加载的jQuery（或其他任何东西，不是“像模块，”你有一个.d.ts文件）


Answer 3:

  1. 采取从TS源的基本jquery.d.ts（ TypeScriptFile ）
  2. 移离所述JQueryStatic（）声明为这样的模块：
  3. 您的代码模块中导入的jQuery： 
import $ = module("jquery");

declare module "jquery" {
   export function (selector: string, context?: any): JQuery;
   export function (element: Element): JQuery;
   export function (object: { }): JQuery;
   export function (elementArray: Element[]): JQuery;
   export function (object: JQuery): JQuery;
   export function (func: Function): JQuery;
   export function (): JQuery;
}
  1. 编译您的模块作为AMD公司（TSC --module AMD my_code.ts）
  2. 使用requirejs组成与以下配置部分客户端您的应用程序： 
requirejs.config({
   paths: {
      'jquery': 'js/jquery-1.8.2.min'
   }
});


Answer 4:

首先，（获得要求-的jQuery从官方GitHub库）。 在这之后你的目录将是这样的： 

require-jquery.js
jquery.d.ts
main.ts
main.js
test.html

目前关于打字稿用jQuery和AMD模块工作的最简单方法是写在main.ts如下： 

///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
    $('body').append('<b>Hello JQuery AMD!</b>');
});

从你的test.html调用它： 

<!DOCTYPE html>
<html>
    <head>
        <script data-main="main" src="require-jquery.js"></script>
    </head>
    <body>
        <h1>TypeScript JQuery AMD test</h1>
    </body>
</html>

希望这可以帮助！



Answer 5:

你引用的路径和文件名（不包含扩展名为.js）外部模块，或者只是文件名，如果他们是全球性的。 在你的情况，你应该这样做module.ts内： 

import jquery = module('./jquery-1.8.2');

记得编译--module AMD ，因为在默认情况下，你会得到一个使用CommonJS的代码require的功能。



文章来源: How to require jquery via AMD in TypeScript
标签： requirejs typescript
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~