gulp 프로세스를 typescript를 포함하도록 마이그레이션하십시오.

Question

Typescript에서 개발할 수 있도록 Angular 1.5.8 응용 프로그램의 빌드 프로세스를 업데이트하고 있습니다. Grunt와 오버 복잡한 경험 후

는 현재 빌드 과정은 간단하고 두 번들 구축 Gulp 및 Browserify를 사용 my-lib.js 및 my-app.js을. 이렇게하면 라이브러리가 더 크지 만 응용 프로그램 코드보다 안정적이므로 자주 컴파일 할 필요가 없으며 응용 프로그램 도메인 코드의 컴파일에는 0.1 초 밖에 걸리지 않습니다. 나는 다른 개발자들과 마찬가지로 그 점에 만족합니다.

이제 Angular 2.0으로 마이그레이션하고 Typescript에서 개발을 시작하기를 기대하지만 빌드 프로세스와이를 수행하는 방법에 대한 최선의 방법을 통합하는 방법에 대해서는 잘 모르겠습니다. tsc을 사용하여 Typescript를 Javascript로 컴파일하고 Browserify가 종속성을 처리하도록 하시겠습니까? 또는 tsc을 기본 빌드 도구로 사용해야하며 종속성을 해결하고 매핑 파일을 만들고 번들을 만들 수 있습니까?

Typescript와 Gulp 모두 매우 빠르게 진화하고 있으며 관련 문서 (1, 2)에서이 설명서를 찾을 수 없습니다. 경험이 많은 사람들로부터 피드백을 받아 주셔서 감사합니다.

Answer 1

tsc에는 타이프 스크립트 파일을 번역 (컴파일)하는 한 가지 목적이 있습니다.

꿀꺽, 다른 한편으로는, 당신이하는 방법에 대한 예를 들어 여기에 볼 수 등 타이프 라이터, 말대꾸, 축소를, 연결

을 컴파일하는 등 다양한 작업을 실행할 수 있습니다 빌드 도구입니다 타이프 라이터를 통합하고 꿀꺽 꿀꺽 사용 browserify : https://www.typescriptlang.org/docs/handbook/gulp.html

또 다른 방법을, 당신은 여기에 샘플을 볼 수있는 모든 꿀꺽를 사용하지만, 오히려 NPM 스크립트를 사용하지 않는 것입니다 : https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.a7lwcmpaf

Answer 2

당신이 타이프 라이터 앞으로 이동로를 내 권하다 ation은 webpack (필자가 선호하는)과 같은 모듈 번들을 내부적으로 통합하는 것입니다. 내부적으로 ts 로더를 사용하여 코드를 간결하게 만듭니다. 또한 컴파일과 함께 정적 코드 분석을 위해 ts lint를 사용할 수 있습니다 (webpack이 처리 할 것입니다). Webpack은 여러 개의 모듈을 만들려는 경우에도 유용합니다. yomen https://github.com/FountainJS/generator-fountain-webapp을 시도해보십시오. 일단 스캐 폴딩되면 gulp 생성 된 파일을 참조 할 수 있습니다. 타이프 스크립트 통합에 대한 아이디어를 줄 것입니다.

Answer 3

이동 코멘트에 대답 : 우리는 그것의 끝으로, 내 조직에서 매우 유사한 운동을 한

. 우리는 webpack을 대부분의 물건에 사용했지만, webpack은 거의 grunt'y라고 느끼지만 꿀꺽 꿀꺽 마신 후 나는 큰일스럽지 않습니다.

우리는 webpack을 사용하여 ts를 js, bunding, minification으로 변환했습니다. 아직 js 문자열이나 css에 html로 사용하지 않았습니다.

di 부분에 대해서는 js to ts에 대해서만 걱정할 필요가 있습니다. ts to js은 di의 각 문자열에주의를 기울여서 문제가되지 않습니다. ts to ts과 관련하여 필요한 인터페이스를 정의해야합니다. 그것들은 장래에 그 (것)들을 js to ts 이동에서 당신을 도울 것이다. 최소한의 의존성으로 핵심 구성 요소로 시작하는 것이 더 좋습니다.

편집 그냥 가지고 꿀꺽의 장점에 대한 부분에 대답 : 특히, 업그레이드가 한 번에 일어나지 않을입니다 마이그레이션 시나리오에서, 그래서 무엇이든은 TS로 이동이 TSC에 의해 처리되어야하며, 꿀꺽 꿀꺽 거리다.

또한 단숨에은 ....

Answer 4

단지 우리가 정지 등 등,베이스 64에 작은 이미지 변환, 부트 스트랩 폰트 경로를 고정, 배치 패키지를 만드는 HTML로 JS를 주입하여 사용하는 JS에 TS보다 훨씬 크다

The best way to do this without overengineering your gulp setup is to use the plain typescript compiler: 

1. Install typescript locally(it won't conflict with your global tsc): 
    npm i typescript --save-dev 

2. Add tsc as npm script(inside package.json). 
    "scripts": { 
     "tsc": "tsc" 
    } 

3. Create proper tsconfig.json for your needs and put it in the same folder as package.json 
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 

4. Use tsc compiler directly from gulp 
    var child_process = require("child_process"); 

    gulp.task("build", function(cb) { 
     var tsc = child_process.spawn("npm", ["-s", "run", "tsc"], {stdio: "inherit", cwd: __dirname}); 
     tsc.on("close", function(code) { 
      console.log("Tsc finished with code", code); 
      cb(); 
     }); 
    }); 

팁. https://www.npmjs.com/package/gulp-sequence을 사용하여 투표하십시오.

Answer 5

나는 이것을하기위한 가장 간단한 방법은 Zwitterion을 사용하는 것입니다. 빠른 소개를 위해 this article을 읽을 수 있습니다.

Zwitterion에서는 일반 스크립트 태그를 통해 TypeScript를 브라우저에 직접 포함시킬 수 있습니다. TypeScript의 모든 기능은 코드가 클라이언트에 제공 될 때 서버별로 파일 단위로 변환되므로 자동으로 사용할 수 있습니다. 내부적으로 SystemJS를 사용하여 모든 브라우저에서 표준이 될 실제 ES 모듈 로더 동작을 에뮬레이션합니다. 프로덕션 환경에서이 작업이 필요하면 Zwitterion을 사용하여 정적 빌드를 생성 할 수 있습니다. 이 모든 것은 번들링을 피하게되므로 성능을 위해 필요한 것이 무엇인지 결정해야합니다. 개인적으로, 나는 HTTP2에 큰 문제가되지 않는 퍼포먼스에 내기를 걸었고 webpack과 모든 친구들이 가져 오는 복잡성에 가장 단순한 빌드를 선호한다.