유형 스크립트로 require.js 구성을 어떻게 설정합니까?

유형 스크립트로 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.tsim을 사용하여 컴파일하면 다음과 같이 출력됩니다.

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

    console.log(b);
});

작동할 수 있는 것처럼 보이지만 실제로는 아닙니다. require.config는 require 블록 안에 있으며 이미 필요한 후에 설정됩니다.

그래서! 저는 지금까지 이것을 해결책으로 삼았습니다.

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에 설치되는 반면, 정의에 대해 가지고 있는 shim 파일은 src/deps/blah.d.ts에 있으므로 생성된 모듈 파일을 사이트의 /js/로 이동한 후 기본 가져오기 경로가 올바르지 않기 때문입니다.)

NB. 여기서 jquery를 언급했지만, 문제는 jquery가 AMD 모듈로 작동하지 않는다는 것이 아닙니다. 저는 이를 위한 shimjquery.ts.d 파일을 가지고 있습니다.여기서 문제는 requirejs 경로입니다.

어제 저는 제 블로그에 이 정확한 문제에 대한 해결책을 썼습니다 - 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"]);

고객의 요구사항을 확인합니다.JS 진입점은 새 구성 파일을 가리킵니다.

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

이제 사용할 수 있습니다.$단순히 사용하여 TypeScript 파일 내에서 네임스페이스를 사용할 수 있습니다.

import $ = require("jquery")

이것이 도움이 되길 바랍니다.

이 게시물은 3년이 지났으며, Typescript를 사용할 때 많은 변경 사항이 있습니다.어쨌든, 웹에서 검색한 후, TS 문서에 대한 몇 가지 조사 - 이 사람들은 잘 해냈습니다, 도움이 될 수 있는 것을 찾았습니다. 그래서 이것은 아마도 당신이 사용할 수 있는 TS의 최신 흐름(2.2.1)에 적용될 수 있을 것입니다.

npm install --save @types/jquery

TypeScript 컴파일러가 수행해야 하는 작업과 방법을 정의해야 하므로 다음을 포함하는 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);
}

따라서 이 답변은 Ed Courtenay의 답변과 동일하게 보입니다. 그렇지 않습니까? 그리고 사용자 210757은 작동하지 않는다고 언급했습니다!!!그리고 그렇지 않습니다! 만약 당신이 당신의 콘솔에 입력한다면.tsc -w --traceResolutiontsc가 jquery에 대한 수 될 입니다.다음은 이전에 시작했다고 가정할 때 완화하는 방법입니다.npm install --save @types/jquery이렇게 함으로써, 이름이 지정된 폴더에서node_modules\@types에 대한 TS 정의를 얻어야 .

• 패키지를 선택합니다.jquery 하위 폴더의 json 파일

• "주" 속성을 찾습니다.

• require.config에서 사용하는 별칭과 동일하게 "jquery"로 설정하고 완료! 모듈은 다음과 같이 변환됩니다.

   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 코드는 나에게 잘 보입니다!저는 우리의 모듈 종속성이 TS 문제처럼 들리지만 어쨌든 작동한다는 사실이 마음에 들지 않습니다.

를 사용하고 ,import때문에 Javascript, Javascript, Javascript, Javascript 등이 있습니다.

declare var require;
require.config({
    paths: {
        "blah": '/libs/blah/blah',
    }
});

// Important, place in an external.d.ts: 
declare module 'blah'{
   // your opportunity to give typescript more information about this js file
   // for now just stick with "any"
   var mainobj:any;
   export = mainobj;
}

import b = require('blah');
console.log(b);

또는 다음을 간단히 수행할 수 있습니다.

var b = require('blah');그리고 그것은 또한 작동할 것입니다.

언급URL : https://stackoverflow.com/questions/21179144/how-do-you-setup-a-require-js-config-with-typescript