Розділіть файли Angular2 TypeScript та файли JavaScript у різні папки, можливо, "dist"

Я використовую 5-хвилинний швидкий старт з веб-сайту angular.io, який містить файлову структуру, подібну до цієї:

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"
  ]
} 

Також package.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. зіставити файли в папку під назвою 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файли в папці dist .

Примітка : Перегляньте інші відповіді. Вони також досить корисні та інформативні.

Моє рішення дещо відрізняється від вищезазначеного. Я починав із насіння Angular2 Quickstart, визначеного тут: https://github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart

А потім змінили лише наступне:

• Додано "outDir": "../dist"доtsconfig.json
• Змінено baseDirатрибут всередині bs-config.jsonна"baseDir": ["dist", "src"]

Потім npm run startпрацює як раніше (навіть html / css та інші файли без копіювання), але компіляція .jsта .mapвбудовані файли dist/appне забруднюють ваш src/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.jsв папці dist .

Спасибі Рахіл Шан, ваша відповідь дала фору,

Як справедливо запитав @Adavo в коментарях

На жаль, моїх файлів html / css немає у папці dist. Як це зробити, щоб скопіювати всі html / css в папку dist?

Відповідь на це запитання - * забезпечити повний шлях до файлу HTML / CSS, використовуючи '/' (з кореневого каталогу) у всіх файлах .ts та, головним чином, у властивості "templateURL" @Component

через багато часу - я зрозумів - без використання Gulp :) Yipppeee

На жаль, моїх файлів html / css немає у папці dist. Як це зробити, щоб скопіювати всі html / css в папку dist?

Відносні шляхи в Angular 2 не такі вже й прості, оскільки фреймворк хоче бути гнучким щодо того, як ви завантажуєте свої файли (CommonJs, SystemJs тощо.) Відповідно до статті " Відносні компоненти" у статті Angular 2 .

Як пояснюється в статті module.idпри використанні з CommonJs (перевірте ваш 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',
...
});

Отже, щоб вирішити це:

На жаль, моїх файлів html / css немає у папці dist. Як це зробити, щоб скопіювати всі html / css в папку dist?

Виконайте кроки як у відповідях @raheel shan, так і @ Lirianer. ... тоді ви можете закінчити цим.

Я вирішив це для своїх цілей за допомогою сценаріїв npm. Розділ сценаріїв у моєму файлі package.json знаходиться нижче. Рішенням є запуск onchnage(пакет npm - npm install --save onchange) одночасно з tscсервером та сервером. Потім за допомогою rsync скопіюйте об’єкти, які потрібно перемістити:

"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/"
}

Для тих з вас , на Windows , ви можете отримати з rsyncдопомогою Cygwinабо тиражованих рішень , таких як cwRsync .

Я спробував пропозицію @WillyC і працював як шарм, просто зауважте, що вам доведеться додати onchangeзалежність до вашого package.jsonфайлу. Я додав трохи лише трохи додаткових сценаріїв, щоб мати чисту настройку при першому запуску, а також видалити залишки файлів 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прапор у rsyncкоманді watchassetsсценарію

Файли 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.js

/**
 * 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 до кінця compilerOptions:

"outDir": "../dist"

4) Оновіть package.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\"",

Ви можете транспілювати .tsфайли в браузері, як і plunker у своєму кутовому шаблоні 2 ts.

Просто запустіть редактор, виберіть новий, потім AngularJS та опцію 2.0.x (TS) (внизу). Але вся суть використання webpack (або будь-якого іншого інструменту зв’язування) полягає у локальній транпіляції файлів.

Я спробував декілька з вищезазначених варіантів і, нарешті, ось на чому зупинився: Peep - розширення для Visual Studio Code.

Як встановити:

• Перегляд -> Розширення
• Піп
• Встановити
• Перезавантажте
• Перегляд -> Командний піддон
• Підглядати немає
• змінити .vscode / settings.json за потребою (мій показаний нижче)

-

{
  "typescript.check.workspaceVersion": false,
  "files.exclude": {
    "**/*.js": true,
    "**/*.js.map": true,
    "node_modules/": true,
    "dist/": true,
    "lib/": true
  }
}

25.01.2017 - оновлення: angular -cli з коробки, подбає про це. та монтажні роботи і зараз.

Я спробував перелічені тут рішення. Вони хороші, але не ідеальні для мене. Я хочу просте рішення. Я не хочу жорстко кодувати інформацію про шлях у всіх своїх файлах компонентів. Я не хочу встановлювати більше пакунків npm, щоб подбати про це.

Тож я придумав найпростішу альтернативу. Це не пряма відповідь на це питання, але для мене це дуже добре працює.

Я просто налаштував налаштування робочої області, щоб jsфайли /appне відображалися. Вони все ще там. Вони просто приховані від мого робочого простору. Для мене цього досить.

Я використовую Sublime Text, тож ось що я маю для налаштувань свого проекту:

"file_exclude_patterns": ["app/*.js"]

Я впевнений, що багато інших редакторів мають подібні функції.

ОНОВЛЕННЯ:

Просто використовуйте Angular CLI. Про все дбають автоматично.

Для Angular 4 з файлами з швидкого запуску все, що мені потрібно було зробити, це наступне (поєднання раніше заявлених відповідей, але трохи інших значень):

• У tsconfig.json (додати): "outDir": "../dist"
• У bs-config.json (зміна): "baseDir": ["dist", "src"],
• У bs-config.e2e.json (зміна): "baseDir": ["dist", "src"],

Ніяких змін до systemjs.config.js.

Я спробував пропозицію @raheel, і це спрацювало для мене. Я змінив структуру відповідно до своїх потреб.

Я використовую таку структуру

Для цього я змінив лише два файли 1. 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. Мені потрібен був додатковий крок, щоб це вдалося. Це було посилання systemJs на файл main.js у файлі index.html, з:

System.import ('main.js'). Catch (function (err) {console.error (err);});

до:

System.import ('dist / main.js'). Catch (function (err) {console.error (err);});

Додаючи поверх того, що сказав Рахіл Шань. Мені довелося внести додаткові зміни в index.html, щоб відобразити імпорт правильного файлу JavaScript.

Ось підсумок з мого боку.

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.js

До:

'app': 'app',

Після:

'app': 'dist/app', //'app

index.html

До:

System.import('main.js').catch(function(err){ console.error(err); });

Після:

System.import('dist/main.js').catch(function(err){ console.error(err); });