Разделяйте файлы 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 и т. Д.) В соответствии с Component-Relative Paths в 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) измените строку "start", чтобы включить команду "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 (функция (ошибка) {console.error (ошибка);});

кому:

System.import ('dist / main.js'). Catch (функция (ошибка) {console.error (ошибка);});

Добавляя к сказанному Рахил Шан. Мне пришлось внести дополнительные изменения в 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); });