Angular2 TypeScript 파일과 JavaScript 파일을 다른 폴더로 분리('dist')
angular.io 웹사이트에서 5분 퀵스타트를 사용하고 있습니다.이것에는 다음과 같은 파일 구조가 포함되어 있습니다.
angular2-quickstart
app
app.component.ts
boot.ts
index.html
license.md
package.json
tsconfig.json
tsconfig.json은 다음과 같은 코드 블록입니다.
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
패키지도 있어요.json:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}
sourceMap을 true에서 false로 변경했기 때문에 코드 에디터에서는 맵파일은 다시 생성되지 않지만 js파일은 생성됩니다.
ts 파일만 작업하고 js와 js.map 파일의 브런치를 받고 싶지 않습니다.앱 폴더와 같은 일반 개발 플로더의 모든 ts 파일과 js와 js.map 파일을 dist라는 폴더에 넣으려면 어떻게 해야 합니까?
좋은 예로는 angular2-webpack-quickstart를 들 수 있습니다.근데 어떻게 하는지 못 알아냈죠?
어떻게 해야 하는지 조언해 주세요. 물론 수동으로 하는 건 아니죠.
감사해요.
아마도 늦었지만 여기 두 단계의 해결책이 있다.
순서 1
업데이트하여 system.config.js를 변경합니다.'app'로로 합니다.'dist/app':
var map = {
'app': 'app', // 'dist/app',
.
.
.
};
이제 다음과 같이 표시됩니다.
var map = {
'app': 'dist/app', // 'dist/app',
.
.
.
};
순서 2
dist 폴더를 만듭니다.
tsconfig.json을 편집하여 추가합니다.
"outDir": "dist"
결과, 「」가 됩니다.tsconfig.json:
{
"compilerOptions": {
.
.
.
.
"outDir": "dist" // Pay attention here
},
"exclude": [
.
.
.
]
}
실행합니다.npm start 정리된 내용이 다 거예요..js ★★★★★★★★★★★★★★★★★」.map.js파일을 저장할 수 있습니다.
메모: 다른 답변을 참고하십시오.그것들은 또한 꽤 유용하고 유익하다.
나의 해결책은 위와 조금 다르다.여기서 정의되어 있는 Angular2 Quickstart 시드에서 시작하였습니다.https://github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart
그리고 다음 사항만 변경했습니다.
- 이 추가되었습니다.
"outDir": "../dist"로로 합니다.tsconfig.json - ★★★를 변경.
baseDirbs-config.json로로 합니다."baseDir": ["dist", "src"]
★★★★★★★★★★★★★★★.npm run start하지 않고 html/ 및 그도 동작합니다).단, 컴파일 되어 있습니다)..js ★★★★★★★★★★★★★★★★★」.map이 있다dist/appsrc/app디렉토리로 이동합니다.
이것이 테스트에 어떤 영향을 미치는지 아직 테스트하지 않았습니다.
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
먼저 라힐샨이 말한대로 해.
그런 다음 dist 폴더를 만듭니다.
후 파일 「이렇게 하다」로합니다.tsconfig.json다음 내용을 추가합니다.
"outDir": "dist"
결과, 「」가 됩니다.tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "dist"
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
" " " " 를 npm start된 모든 ..js ★★★★★★★★★★★★★★★★★」.map.jsdist 폴더에 있습니다.
Thanx raheel shan, 당신의 답변이 유리했습니다.
@Adavo가 코멘트에서 올바르게 요구했듯이
유감스럽게도 dist 폴더에 html/css 파일이 없습니다.dist 폴더에 있는 모든 html/css를 복사하려면 어떻게 해야 하나요?
이 질문에 대한 답변은 * 모든 .ts 파일 및 주로 "템플릿"에서 (root 디렉토리에서) '/'를 사용하여 HTML/CSS 파일에 대한 전체 경로를 제공하십시오.@Component의 URL" 속성
오랜 시간이 흐른 후 - 알았어 - Gulp을 사용하지 않고 :) Yippeee
유감스럽게도 dist 폴더에 html/css 파일이 없습니다.dist 폴더에 있는 모든 html/css를 복사하려면 어떻게 해야 하나요?
Angular 2의 Component-Relative Paths in Angular 2 기사에 따르면 프레임워크는 파일(CommonJs, SystemJs 등)을 로드하는 방법을 유연하게 하려고 하기 때문에 Angular 2의 상대 경로는 그리 간단하지 않습니다.
에서 설명한 와 같이module.idCommonJs와 함께 사용하는 경우(tsconfig.json 확인)에는 모듈의 절대 루트가 포함되어 상대 경로를 구축하는 데 사용할 수 있습니다.
따라서 더 나은 방법은 css/html 파일을 ts 파일에 남겨두고 다음과 같이 컴포넌트를 구성하는 것입니다.예를 들어 빌드 파일이 dist라는 이름의 다른 폴더에 있다고 가정합니다.이렇게 하면 파생된 빌드 경로를 해당 빌드 경로를 포함하는 소스 빌드 경로로 변환하여 css 및 html 파일을 상대 경로로 사용하는 데 문제가 없습니다.기본적으로 파일을 삭제합니다./dist/을 '아까운데'로 바꾸거나요./src/
@Component({
moduleId: module.id.replace("/dist/", "/"),
templateUrl: 'relative-path-to-template/component.html',
...
});
원본 및 빌드에 대해 별도의 폴더가 있는 경우 대신 다음을 수행할 수 있습니다.
@Component({
moduleId: module.id.replace("/dist/", "/src/"),
templateUrl: 'relative-path-to-template/component.html',
...
});
이 문제를 해결하려면:
유감스럽게도 dist 폴더에 html/css 파일이 없습니다.dist 폴더에 있는 모든 html/css를 복사하려면 어떻게 해야 하나요?
@raheel shan과 @Lirianer의 답변에 있는 단계를 모두 수행합니다.이것으로 끝납니다.
저는 이것을 npm 스크립트를 사용하여 제 목적을 위해 해결했습니다.아래는json 파일입니다.입니다.onchnage 패키지 - (npm 패키지)npm install --save onchange)와 tsc 」 。할 자산을 복사합니다.알싱크하다
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run watchassets\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"movesssets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/",
"watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'build/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/"
}
를 하고 있는 의 경우는, 를 할 수 있습니다.rsync★★★★★★★★★★★★★★★★★를 통해Cygwin또는 cwRsync와 같은 패키지화된 솔루션을 사용합니다.
저는 @WillyC의 제안을 받아보고 매력적으로 일했습니다.단, 이 제안에는onchange에 대한 package.json 시 을 하고 html 파일을 했습니다(같은 를 할 수 처음 실행 시 클린 셋업을 하고 남은 html/css 파일을 삭제하기 위해 약간의 스크립트를 추가했습니다(TSC에서도 같은 처리를 할 수 있으면 좋겠습니다).
제 '아, 아, 아, 아, 맞다.package.json
{
...
"scripts": {
"start": "npm run cleandist && npm run moveassets && tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run watchassets\" ",
...
"cleandist": "rm -rf dist/*",
"moveassets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./dist/",
"watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'dist/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' --delete ./app/ ./dist/"
},
...
"devDependencies": {
...
"onchange":"^3.0.2"
}
}
님의 rsync"delete" (삭제해 주세요.--delete에 깃발기rsyncwatchassets 편집
Angular2 TypeScript 파일과 JavaScript 파일을 다른 폴더에 저장
다음은 Angular 2의 최신 버전 V2.1.1에 대한 설정이며, 매우 잘 작동합니다.
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "./app/dist"
}
}systemjs.config.syslog
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
// app: 'app/dist', && main: './dist/main.js',
// Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/dist/main.js(…)
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
// index.html import path
// Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/main.js(…)
// app: 'app/dist', && main: './main.js',
main: './dist/main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
@Nagyl에서 영감을 받아 나만의 방법을 개발했고 공유할 가치가 있다고 생각합니다.
1) cpx 설치
npm install cpx
2) bs-config.json을 업데이트하여 baseDir를 "src"에서 "dist"로 변경합니다.
"baseDir":"dist"
3) tsconfig.json을 업데이트하고 outDir를 컴파일러 옵션 끝에 추가합니다.
"outDir": "../dist"
4) 패키지 업데이트json: 4.1) 스크립트 끝에 새 명령 추가:
"cpx": "cpx \"src/**/*.{html,css,js,png,jpg}\" dist --watch"
4.2) "cpx" 명령을 포함하도록 "시작" 행을 수정합니다.
"start": "concurrently \"npm run build:watch\" \"npm run cpx\" \"npm run serve\"",
할 수 요..tsangular 2 ts 템플릿에서 plunker가 수행하는 것과 마찬가지로 브라우저에 파일이 있습니다.
에디터를 기동해, 새로운 것을 선택하고 나서, AngularJS, 및 2.0.x(TS) 옵션(맨 아래)을 선택합니다.그러나 웹 팩(또는 다른 번들 도구)을 사용하는 목적은 파일을 로컬로 변환하는 것입니다.
위에 언급된 옵션 중 몇 가지를 시도해 보았고, 마침내, 이것이 내가 결정한 것입니다: Peep - 의 확장입니다.Visual Studio Code
설치 방법:
- 표시 -> 내선번호
- 삑삑이
- 설치하다
- 새로고침
- 표시 -> 명령 팔레트
- 피프 없음
- 필요에 따라 .syslogode/syson을 변경합니다(아래 참조).
-
{
"typescript.check.workspaceVersion": false,
"files.exclude": {
"**/*.js": true,
"**/*.js.map": true,
"node_modules/": true,
"dist/": true,
"lib/": true
}
}
2017년 01월 25일 - 업데이트: angular-cli 개봉 후 처리. 설치는 즉시 완료됩니다.
여기에 나와 있는 솔루션을 시험해 보았습니다.그것들은 좋지만 나에게는 이상적이지 않다.간단한 해결책을 원합니다.모든 구성 요소 파일의 경로 정보를 하드 코드하지 않습니다.이 문제를 해결하기 위해 npm 패키지를 더 이상 설치하고 싶지 않습니다.
그래서 가장 쉬운 대안을 생각해 냈어요.이 질문에 대한 직접적인 답변은 아니지만, 제게는 아주 잘 맞습니다.
하고, 업업업 i i업 i 「 」가.js「」의 /app나타나지 마세요.그들은 아직 거기에 있다.그것들은 내 작업 공간에서 숨겨져 있을 뿐이다.나한테는 그걸로 충분해
Sublime Text를 사용하고 있습니다.프로젝트 설정에 대해서는 다음과 같습니다.
"file_exclude_patterns": ["app/*.js"]
다른 편집자들도 비슷한 기능을 가지고 있을 거예요.
갱신:
Angular CLI 를 사용합니다.모든 것이 자동으로 처리됩니다.
Quickstart에서 파일이 있는 Angular 4의 경우 다음 작업만 하면 됩니다(앞에서 설명한 답변이 혼합되어 있지만 값이 약간 다릅니다).
- : tsconfig.json ( )) ) :
"outDir": "../dist" - bs-config.json(「」):
"baseDir": ["dist", "src"], - bs-config.e2e.json(「」):
"baseDir": ["dist", "src"],
systemjs.config.js에는 변경이 없습니다.
@raheel의 제안을 받아봤는데 효과가 있었어요.저는 필요에 따라 구조를 변경했습니다.
나는 다음과 같은 구조를 사용하고 있다.
이를 위해 systemjs.config.js와 2.tsconfig.json 두 파일만 수정했습니다.
systemjs.config.js로 변경했습니다.
map: { // previously it was app: 'app', app: 'app/js', ...
에 tsconfig.json을 ."outDir": "app/js"
Angular 2.4로 작업하고 있습니다.나는 그것을 작동시키기 위해 추가 단계가 필요했다.이것은 index.html의 main.js 파일에 대한 systemJs 참조를 갱신한 것입니다.
System.import('main.js').catch(function(err){ console.error(err);});
대상:
System.import('dist/main.js').catch(function(err){console.error(err);});
라힐샨이 말한 것 외에.현재 올바른 javascript 파일을 가져오기 위해 index.html을 추가로 변경해야 했습니다.
여기 제 입장에서 요약한 내용이 있습니다.
tsconfig.json
전에
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
그 후:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"outDir": "dist"
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
systemjs.config.syslog
이전:
'app': 'app',
그 후:
'app': 'dist/app', //'app
index.displaces를 표시합니다.
이전:
System.import('main.js').catch(function(err){ console.error(err); });
그 후:
System.import('dist/main.js').catch(function(err){ console.error(err); });
언급URL : https://stackoverflow.com/questions/34684527/separate-angular2-typescript-files-and-javascript-files-into-different-folders
'programing' 카테고리의 다른 글
| AngularJs ngRepeat 요소 제거 (0) | 2023.03.02 |
|---|---|
| 우체부는 어떻게 요청을 보내나요?Ajax, 동일한 원본 정책 (0) | 2023.03.02 |
| 대응: useEffect vs useMemo vs useState (0) | 2023.03.02 |
| Woocommerce 카트에서 각 제품의 작성자 ID를 가져옵니다. (0) | 2023.03.02 |
| ajax 함수로 호출된 파일에 대한 직접 액세스 방지 (0) | 2023.03.02 |