AngularJS (1.x)에서 Angular (2+)로 마이그레이션 하는 공식 자습서를 따르고 있습니다.
내 응용 프로그램을 구성 요소로 나누고 모듈 로더 (내 경우 Webpack)와 함께 ES6을 사용했지만 이제 TypeScript를 설정하는 방법을 모르겠습니다.
TypeScript 컴파일러를 설치하고 어떻게 든 Webpack에이를 사용하도록 지시해야합니다. 내가 어떻게 해?
소스 코드는 여기에서 확인할 수 있습니다 : https://github.com/shindarth/othello
npm install typescript awesome-typescript-loader source-map-loader --save-dev
이것은 typescript , awesome-typescript-loader 및 source-map-loader 를 package.json 파일 의 devDependencies 목록에 설치 합니다.
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": true
}
}
공식 tsconfig.json 문서를 참조하여 ts 컴파일러 옵션을 추가로 사용자 정의 할 수 있습니다 .
이 시점에서 모든 *.js파일의 이름 을 .ts.
다음을 사용하여 angularjs를 가져올 때마다 유의하십시오.
import angular from 'angular';
다음과 같이 변경해야합니다.
import * as angular from 'angular';
따라서 webpack.config.js 파일 을 다음과 같이 편집하십시오 .
1) 항목 파일 이름을 편집합니다 (이름을 변경하고 확장자를 .ts로 변경했기 때문에).
제 경우에는 ./app/index.js이전 이었습니다 .
entry: {
app: './app/index.ts'
},
2) 아래에 다음을 추가하십시오.
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다