web-dev-qa-db-ja.com

typescriptを使用してrequire.js設定をどのように設定しますか？

わかりました、私はこれについて多くの質問と回答を読んでいます、そしてそれの多くはゴミです。

非常に簡単な質問があります。これと同等のことをするにはどうすればよいですか。

require.config({
    paths: {
        "blah": '/libs/blah/blah',
    }
}); 
require(['blah'], function(b) {
    console.log(b); 
});

タイプスクリプトで？

これは機能しません：

declare var require;
require.config({
    paths: {
        "blah": '/libs/blah/blah',
    }
});
import b = require('blah');
console.log(b);

s.ts(8,1): error TS2071: Unable to resolve external module ''blah''.
s.ts(8,1): error TS2072: Module cannot be aliased to a non-module type.
error TS5037: Cannot compile external modules unless the '--module' flag is provided.

--moduleフラグを使用してコンパイルし、ダミーのblah.ts shimをコンパイルしますが、出力は次のとおりです。

define(["require", "exports", 'blah'], function(require, exports, b) {
    require.config({
        paths: {
            "blah": '/libs/blah/blah'
        }
    });

    console.log(b);
});

動作するように見えますが、実際には動作しません。require.configはinside requireブロックであり、設定されていますafterすでに必要です。

そう！これまでのところ、解決策としてthisを使用しています：

class RequireJS {

    private _r:any = window['require'];

    public config(config:any):void {
        this._r['config'](config);
    }

    public require(reqs:string[], callback:any):void {
        this._r(reqs, callback);
    }
}

var rjs = new RequireJS();
rjs.config({
    paths: {
        "jquery": '/libs/jquery/jquery',
        "slider": '/js/blah/slider'
    }
});

rjs.require(['slider'], function(slider) {
    console.log(slider);
});

それはひどいようです。

したがって、相互に依存しているモジュール内では、この種のことは完全にうまく機能します。

import $ = require('jquery');
export module blah {
   ...
}

さまざまな名前付きモジュールのインポートされたパスが正しいように、トップレベルでrequirejs構成を設定する適切な方法が必要です。

（そして、これは主に、サードパーティの依存関係がbowerを使用して解決され、/ lib/blahにインストールされているためです。したがって、生成されたモジュールファイルをサイトの/ js /に移動した後のデフォルトのインポートパスは正しくありません）

NB。ここではjqueryについて説明しましたが、問題はnotであり、jqueryはAMDモジュールとしてのプロパティとして機能しません。このためのshim jquery.ts.dファイルがあります。ここでの問題はrequirejsパスです。

requirejstypescript
24
Doug

昨日、この正確な問題の解決策をブログに書いた- http://edcourtenay.co.uk/musings-of-an-idiot/2014/11/26/TypeScript-requirejs-and-jquery ：

TL; DR-構成ファイルを作成するconfig.tsは次のようになります。

requirejs.config({
    paths: {
        "jquery": "Scripts/jquery-2.1.1"
    }
});

require(["app"]);

requireJSエントリポイントが新しい構成ファイルを指していることを確認します。

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

$名前空間をTypeScriptファイル内から単純に使用して

import $ = require("jquery")

お役に立てれば

8
Ed Courtenay

この投稿は3年前で、TypeScriptを使用するときに多くの変更が加えられています。とにかく、Webでの検索、TSのドキュメントの調査、これらの人たちが良い仕事をした後、私は何か役立つものを見つけました。これは最新のTS（2.2.1）に適用できます。

npm install --save @types/jquery

typeScript Compilerが実行する必要があることとその方法を定義する必要があるなど、サードパーティのJSライブラリについても同じことを行うため、以下を含むtsconfig.jsonファイルを作成します。

// tsconfig.json file
{
   "compilerOptions": {
   "allowJs": true,
   "baseUrl": "./Scripts",//Same as require.config
   "module": "AMD",
   "moduleResolution": "Node",//to consider node_modules/@types folders
   "noImplicitAny": false,
   "target": "es5", // or whatever you want
   "watch": true
}

では、requireの設定に注目しましょう

// require-config.ts
declare var require: any;
require.config({
   baseUrl: "./Scripts/",
   paths: {
      "jquery": "vendor/jquery/jquery.x.y.z"
      // add here all the paths your want
      // personnally, I just add all the 3rd party JS librairies I used
      // do not forget the shims with dependencies if needed...
   }
});

これまでのところ、jqueryを使用し、Scripts/ModuleフォルダーにあるTSで記述されたモジュールに焦点を当てています。

// module/blah.ts
/// <AMD-module name="module/blah" />
import $ = require("jquery");
export function doSomething(){
    console.log("jQuery version :", $.version);
}

したがって、この回答はエドコートネイの回答と同じように見えますか？そしてuser210757はそれが機能しないと述べました!!!そしてそれはしません！コンソールに入力した場合tsc -w --traceResolution, you'll see that tsc cannot find any definition for jquery here's how to alleviate assuming you previously launchnpm install --save @ types/jquery`これを行うと、node_modules\@typesという名前のフォルダーにjqueryのTS定義が表示されます screenshot node-module jquery

  • jqueryサブフォルダーでpackage.jsonファイルを選択します
  • "main"プロパティを探します

  • "jquery"に設定します。require.configで使用しているエイリアスと同じで完了です！あなたのモジュールはとして翻訳されます

    define("module/blah", ["require", "exports", "jquery"], function (require, exports, $) {
   "use strict";
   Object.defineProperty(exports, "__esModule", { value: true });
   function doSomething() {
     console.log("jQuery version:", $.fn.jQuery);
   }
   exports.doSomething = doSomething;
});

そしてそのJSコードは私にはよく見えます！私はモジュールの依存関係リストが好きではありませんrequire "＆" exports "、それはTSの問題のように聞こえますが、とにかくそれはうまくいきます！

3
zobidafly