将 Angular2 TypeScript 文件和 JavaScript 文件分离到不同的文件夹中，可能是“dist”

Question

提问by Xinrui Ma

I am using the 5 min quickstartfrom angular.io website, which contain a file structure like this:

我正在使用angular.io 网站上的5 分钟快速入门，其中包含如下文件结构：

angular2-quickstart
 app
   app.component.ts
   boot.ts
 index.html
 license.md
 package.json
 tsconfig.json

the tsconfig.json is a code block like this ：

tsconfig.json 是这样的代码块：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

Also the package.json:

还有 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"
  }
}

I change the sourceMap from true to false, so in the code editor, the map file is not generated again, but the js file still get generated.

我将 sourceMap 从 true 更改为 false，因此在代码编辑器中，不会再次生成映射文件，但仍然生成了 js 文件。

I want to work on only ts file and don't want to get a brunch of js and js.map file, what should I do to put all my ts files in my regular develop floder like app folder and all the js and js.map files into a folder called dist?

我只想处理 ts 文件，不想得到 js 和 js.map 文件的早午餐，我应该怎么做才能将我所有的 ts 文件放在我的常规开发文件中，例如 app 文件夹以及所有 js 和 js。将文件映射到名为 dist 的文件夹中？

A good example of this might be angular2-webpack-quickstart. But I didn't figure out how they do that?

一个很好的例子可能是angular2-webpack-quickstart。但我不明白他们是怎么做到的？

Any advice how to do that, of course not manually.

任何建议如何做到这一点，当然不是手动。

Thanks,

谢谢，

Answer 1

回答by Muhammad Raheel

Probably late but here is a two-step solution.

可能晚了，但这里有一个两步解决方案。

Step 1

第1步

Change system.config.jsby updating 'app'to 'dist/app':

通过更新来更改system.config.js：'app''dist/app'

var  map = {
    'app':                        'app', // 'dist/app',
    .
    .
    .
};

Now it will look like this:

现在它看起来像这样：

var  map = {
    'app':                        'dist/app', // 'dist/app',
    .
    .
    .
};

Step 2

第2步

Create the distfolder.

Edit tsconfig.jsonand add:

创建dist文件夹。

编辑tsconfig.json并添加：

"outDir": "dist"

The resulting tsconfig.json:

结果tsconfig.json：

{
  "compilerOptions": {
    .
    .
    .
    .

    "outDir": "dist" // Pay attention here
  },
  "exclude": [
    .
    .
    .
  ]
}

Run npm startand you should see all the compiled .jsand .map.jsfiles in the distfolder.

运行npm start，您应该会看到dist文件夹中的所有编译.js和.map.js文件。

Note: Go through other answers. They are quite useful and informative too.

注意：通过其他答案。它们也非常有用和信息丰富。

Answer 2

回答by NagyI

My solution is a bit different from the above. I was starting from the Angular2 Quickstart seed defined here: https://github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart

我的解决方案与上述略有不同。我从这里定义的 Angular2 Quickstart 种子开始：https: //github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart

And then only changed the following:

然后只更改了以下内容：

Added "outDir": "../dist"to tsconfig.json
Changed the baseDirattribute inside bs-config.jsonto "baseDir": ["dist", "src"]

添加"outDir": "../dist"到tsconfig.json
更改baseDir属性中bs-config.json来"baseDir": ["dist", "src"]

Then npm run startworks as before (even html/css and other files without any copying), but compiled .jsand .mapfiles are built into dist/appand won't pollute your src/appdirectory.

然后npm run start像以前一样工作（甚至 html/css 和其他文件没有任何复制），但编译.js和.map文件被内置dist/app并且不会污染您的src/app目录。

Please note that I haven't tested how this affects testing yet.

请注意，我还没有测试这如何影响测试。

Answer 3

回答by Lirianer

I may be also late but I did this.

我也可能迟到了，但我做到了。

First do what raheel shan said.

先照拉希尔山说的去做。

Then create the distfolder.

After creating the folder go to the file tsconfig.jsonand add this:

然后创建dist文件夹。

创建文件夹后，转到文件tsconfig.json并添加以下内容：

"outDir": "dist"

The resulting tsconfig.json

所结果的 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"
  ]
}

If you now run npm startand save a file you should see all the compiled .jsand .map.jsin the distfolder.

如果你现在运行npm start和保存文件，你应该看到所有的编译.js和.map.js在DIST文件夹中。

Answer 4

回答by Abdeali Chandanwala

Thanx raheel shan, your answer gave a head start,

谢谢 raheel shan，你的回答开了个好头，

As @Adavo rightly asked above in comments

正如@Adavo 在评论中正确地提出的那样

Unfortunately, my html/css files is not present in the dist folder. How to do in order to copy all html/css in dist folder ?

不幸的是，我的 html/css 文件不在 dist 文件夹中。如何复制 dist 文件夹中的所有 html/css？

The answer to this question is * provide full path to HTML/CSS File using '/' (from root Directory) in all the .ts Files and mainly in "templateURL" property of @Component

这个问题的答案是 * 在所有 .ts 文件中使用“/”（来自根目录）提供 HTML/CSS 文件的完整路径，主要在@Component 的“templateURL”属性中

after a lot of time - I got it figured it out - without using Gulp :) Yipppeee

经过很多时间 - 我明白了 - 不使用 Gulp :) Yipppeee

Answer 5

回答by WillyC

So, to solve this:

所以，要解决这个问题：

Unfortunately, my html/css files is not present in the dist folder. How to do in order to copy all html/css in dist folder ?

不幸的是，我的 html/css 文件不在 dist 文件夹中。如何复制 dist 文件夹中的所有 html/css？

Do the steps in both @raheel shan and @Lirianer's answers. ...then you can finish it off with this.

执行@raheel shan 和@Lirianer 的答案中的步骤。……那你就可以这样结束了。

I have solved this for my purposes using npm scripts. The scripts section in my package.json file is below. The solution is to run onchnage(an npm package - npm install --save onchange) concurrently with tscand the server. Then use rsync to copy the assets you want to move:

我已经使用 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/"
}

For those of you on Windows you can get rsyncvia Cygwinor with packaged solutions such as cwRsync.

对于那些使用 Windows 的人，您可以rsync通过Cygwin或使用打包的解决方案，例如cwRsync。

Answer 6

回答by Michail Michailidis

Unfortunately, my html/css files is not present in the dist folder. How to do in order to copy all html/css in dist folder ?

不幸的是，我的 html/css 文件不在 dist 文件夹中。如何复制 dist 文件夹中的所有 html/css？

Relative paths in Angular 2 are not that straightforward because the framework wants to be flexible with how you load your files (CommonJs, SystemJs, .. etc) according to Component-Relative Paths in Angular 2article.

Angular 2 中的相对路径并不是那么简单，因为根据Angular 2文章中的组件相对路径，框架希望灵活地加载文件（CommonJs、SystemJs 等）。

As the article explains module.idwhen used with CommonJs (check your tsconfig.json) contains the absolute root of the module and it can be used to construct a relative path.

正如文章所解释的，module.id当与 CommonJs 一起使用时（检查您的 tsconfig.json）包含模块的绝对根，它可用于构建相对路径。

So a better alternative could be to leave the css/html files with the ts files and configure your component like below, assuming you just have your build files in a separate folder called dist.. This way your css and html files will be loaded with no problem using relative paths by converting the derived build path to the source one that contains them - essentially removing /dist/or renaming it to /src/;)

因此，更好的选择可能是将 css/html 文件与 ts 文件一起保留，并像下面一样配置您的组件，假设您的构建文件位于名为dist的单独文件夹中。这样您的 css 和 html 文件将被加载通过将派生的构建路径转换为包含它们的源路径来使用相对路径没有问题 - 基本上是将/dist/其删除或重命名为/src/;)

@Component({
   moduleId: module.id.replace("/dist/", "/"),
   templateUrl: 'relative-path-to-template/component.html',
...
});

if you have separate folders for source and build you can do this instead:

如果您有单独的源文件夹和构建文件夹，您可以这样做：

@Component({
   moduleId: module.id.replace("/dist/", "/src/"),
   templateUrl: 'relative-path-to-template/component.html',
...
});

Answer 7

回答by AlphaZygma

I tried @WillyC's suggestion and worked like a charm, just note that you'll have to add the onchangedependency to your package.jsonfile. I added a little just a little extra scripts to have a clean setup upon first run and also to remove leftover html/css files (it'd be nice if same could be done for TSC)

我尝试了@WillyC的建议并且工作得很有魅力，请注意您必须将onchange依赖项添加到您的package.json文件中。我添加了一些额外的脚本，以便在第一次运行时进行干净的设置，并删除剩余的 html/css 文件（如果可以为 TSC 做同样的事情，那就太好了）

Anyway, here is a section of my package.jsonfile

无论如何，这是我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"
  }
}

For the rsyncdelete, notice the --deleteflag on the rsynccommand of the watchassetsscript

对于rsync删除，请注意脚本命令上的--delete标志rsyncwatchassets

Answer 8

回答by xgqfrms

Angular2 TypeScript files and JavaScript files into different folder

Angular2 TypeScript 文件和 JavaScript 文件放入不同的文件夹

Here is my config for Angular 2 the latest version V2.1.1, and it work very well!

这是我对 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);

Answer 9

回答by Windchill

Inspired by @Nagyl, I developed my own way and I believe it's worth to share:

受@Nagyl 的启发，我开发了自己的方式，我认为值得分享：

1) Install cpx

1）安装cpx

npm install cpx

2) Update bs-config.json and change baseDir from "src" to "dist"

2) 更新 bs-config.json 并将 baseDir 从“src”更改为“dist”

"baseDir":"dist"

3) Update tsconfig.json and add outDir to end of compilerOptions:

3) 更新 tsconfig.json 并将 outDir 添加到 compilerOptions 的末尾：

"outDir": "../dist"

4) Update package.json: 4.1) add a new command to end of scripts:

4) 更新 package.json: 4.1) 在脚本末尾添加一个新命令：

"cpx": "cpx \"src/**/*.{html,css,js,png,jpg}\" dist --watch"

4.2) modify "start" line to include "cpx" command:

4.2) 修改“开始”行以包含“cpx”命令：

"start": "concurrently \"npm run build:watch\" \"npm run cpx\" \"npm run serve\"",

Answer 10

回答by M. Neuweiler

For Angular 4 with files from quickstart, all I had to do was the following (a mix of the previously stated answers but slightly different values) :

对于带有 Quickstart 文件的 Angular 4，我所要做的就是以下内容（混合了先前所述的答案，但值略有不同）：

In tsconfig.json (add) : "outDir": "../dist"
In bs-config.json (change) : "baseDir": ["dist", "src"],
In bs-config.e2e.json (change) : "baseDir": ["dist", "src"],

在 tsconfig.json（添加）中： "outDir": "../dist"
在 bs-config.json （更改）中： "baseDir": ["dist", "src"],
在 bs-config.e2e.json （更改）中： "baseDir": ["dist", "src"],

No change to systemjs.config.js.

systemjs.config.js 没有变化。

将 Angular2 TypeScript 文件和 JavaScript 文件分离到不同的文件夹中，可能是“dist”

提问by Xinrui Ma

回答by Muhammad Raheel

Step 1

第1步

Step 2

第2步

回答by NagyI

回答by Lirianer

回答by Abdeali Chandanwala

回答by WillyC

回答by Michail Michailidis

回答by AlphaZygma

回答by xgqfrms

Angular2 TypeScript files and JavaScript files into different folder

Angular2 TypeScript 文件和 JavaScript 文件放入不同的文件夹

回答by Windchill

回答by M. Neuweiler

相关推荐

最近更新

标签

将 Angular2 TypeScript 文件和 JavaScript 文件分离到不同的文件夹中，可能是“dist”

提问by Xinrui Ma

回答by Muhammad Raheel

Step 1

第1步

Step 2

第2步

回答by NagyI

回答by Lirianer

回答by Abdeali Chandanwala

回答by WillyC

回答by Michail Michailidis

回答by AlphaZygma

回答by xgqfrms

Angular2 TypeScript files and JavaScript files into different folder

Angular2 TypeScript 文件和 JavaScript 文件放入不同的文件夹

回答by Windchill

回答by M. Neuweiler

相关推荐

Javascript 我应该如何使用 jcrop 在客户端裁剪图像并上传它？

Javascript 如何将 HTML 输入值的数据类型更改为整数？

Javascript 使用带有注册表的 myproject/.npmrc

在 javascript 函数上调用 toString 返回源代码

相关推荐

最近更新

标签