Angular-cli.json 、 webpack.conf 和 tsconfig.json 之间的区别

Question

我正在构建一个 angular4/typescript 桌面应用程序并且在两者之间感到困惑

angular-cli.json
tsconfig.json
webpack.conf.js

谁能解释一下以上 3 个配置文件的主要概念差异及其用途？
我必须在我的项目中定义全部 3 个，还是只定义一个就足够了。

例如：路径ALIAS可以定义在所有3个里面 webpack/tsconfig/angular-cli。但是哪一个比其他的有好处呢？或者他们都一样，不管你用哪个。
所以一般来说，他们都可以提供项目配置，所以一个是最佳性能并被推荐为最佳实践。

angular-cli.json

{
    "project": {
        "version": "1.0.0-beta",
        "name": "project"
    },
    "apps": [
        {
            "root": "src",
            "outDir": "dist",
            "assets": [
                "images",
                "favicon.ico"
            ],
            "index": "index.html",
            "main": "main.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.json",
            "prefix": "app",
            "mobile": false,
            "styles": [
                "styles.css"
            ],
            "scripts": [
                "../node_modules/core-js/client/shim.min.js",
                "../node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
                "../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
                "../node_modules/web-animations-js/web-animations.min.js"
            ],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
    ],
    "addons": [],
    "packages": [],
    "e2e": {
        "protractor": {
            "config": "./protractor.config.js"
        }
    },
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "scss",
        "prefixInterfaces": false,
        "inline": {
            "style": false,
            "template": false
        },
        "spec": {
            "class": false,
            "component": true,
            "directive": true,
            "module": false,
            "pipe": true,
            "service": true
        }
    }
}

tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "rootDir": "../",
        "baseUrl": "",
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
            "es6",
            "dom"
        ],
        "mapRoot": "src",
        "module": "commonjs",
        "moduleResolution": "node",
        "outDir": "dist/out-tsc",
        "sourceMap": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "types": [
          "jasmine",
          "core-js",
          "node"
        ]
    },
    "exclude": [
        "node_modules",
        "dist",
        "test.ts"
    ]
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');
var webpackMerge = require('webpack-merge');
var HtmlWebpackPlugin = require('html-webpack-plugin');

// Webpack Config
var webpackConfig = {
  entry: {
    'main': './src/main.browser.ts',
  },

  output: {
    publicPath: '',
    path: path.resolve(__dirname, './dist'),
  },

  plugins: [
    new webpack.ContextReplacementPlugin(
      // The (\|\/) piece accounts for path separators in *nix and Windows
      /angular(\|\/)core(\|\/)@angular/,
      path.resolve(__dirname, '../src'),
      {
        // your Angular Async Route paths relative to this root directory
      }
    ),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),

  ],

  module: {
    loaders: [
      // .ts files for TypeScript
      {
        test: /\.ts$/,
        loaders: [
          'awesome-typescript-loader',
          'angular2-template-loader',
          'angular2-router-loader'
        ]
      },
      { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
      { test: /\.html$/, loader: 'raw-loader' }
    ]
  }

};

    var defaultConfig = {
      devtool: 'source-map',

      output: {
        filename: '[name].bundle.js',
        sourceMapFilename: '[name].map',
        chunkFilename: '[id].chunk.js'
      },

      resolve: {
        extensions: [ '.ts', '.js' ],
        modules: [ path.resolve(__dirname, 'node_modules') ]
      },

      devServer: {
        historyApiFallback: true,
        watchOptions: { aggregateTimeout: 300, poll: 1000 },
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
          "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
        }
      },

      node: {
        global: true,
        crypto: 'empty',
        __dirname: true,
        __filename: true,
        process: true,
        Buffer: false,
        clearImmediate: false,
        setImmediate: false
      }
    };


    module.exports = webpackMerge(defaultConfig, webpackConfig);

Answer 1

1) 因为 Angular4 最好与 typescript 一起使用，但您也可以使用 dart 和 ES5 javascript 来开发应用程序。现在

angular-cli.json

tsconfig.json

webpack.conf.js

angular-cli.json

Angular CLI 是一个命令行界面 (CLI)，用于自动化您的开发工作流程。它允许您：

创建一个新的 Angular 应用程序
运行一个支持 LiveReload 的开发服务器来预览你的开发期间的应用
向现有 Angular 应用程序添加功能
构建您的应用程序以部署到生产环境

因此，从 cli 自动化 angular 应用程序需要 angular-cli.json 加载其配置。

TypeScript 是 Angular 应用程序开发的主要语言。它是 JavaScript 的超集，具有类型安全和工具的设计时支持。

浏览器无法直接执行 TypeScript。必须使用 tsc 编译器将 Typescript "transpiled" 转换为 JavaScript， tsconfig.json— TypeScript 编译器配置需要文件。

webpack.conf.js 它也是一个捆绑器，它提供与 angular cli 相同的配置功能，但在 webpack 中你必须这样做在 angular cli 的情况下手动，您可以在不知道详细信息的情况下利用 Angular CLI 命令行帮助

2) 如果您通过 CLI

开发 angular 应用程序，则需要 angular-cli.json 和 tsconfig.json

如果使用自己的捆绑器，如 webpack 或 systemjs，在这种情况下，您可以拥有 tsconfig.json 和捆绑器配置文件 webpack.config.js

3)最佳实践最好使用ANGULAR CLI 你可以查看官方文档

Answer 2

Wasiq 的回答很棒，我想分享一些更综合的信息，这可能有助于我更好地理解 angularcli.json 和 webpack.config.json。

无论技术栈如何，一个项目都需要一个打包器。

Webpack.conf.js - Bundler

Webpack 是非常受欢迎的捆绑器之一，因为它为 table 带来了一些特性。它扫描 import 语句并维护一个依赖树，允许它只捆绑你的代码实际使用的资源和 js 文件。但它需要 loaders 和 plugins 配置，有时可能有点难以遵循。

angular-cli - Bundler but provides other useful features, ex: generating a pre scaffolded angular app or generating components/services

Angular 团队创建了 anguar-cli – 一个非常强大的打包工具，美妙之处在于它在幕后使用 Webpack，已经预先配置，所以您无需配置即可享受这些好处。所以你不会错过 webpack 的功能，但是 angular-cli 节省了很多精力。

您仍然可以访问项目配置文件，例如 karma.conf.js、protractor.conf.js、tslint.json、tsconfig.json 和 package.json。

Answer 3

轻松精确，

angular-cli.json 是 angular cli generator for [ 的配置文件=48=] apps 内部默认使用webpack
tsconfig.json是typescript编译器的配置文件
webpack.config 是 js/css 的 webpack bundler 的配置文件。如果您更喜欢自己的开发工作流程，则需要此文件而不是 angular-cli.

注意：如果您对 angular 应用程序使用 angular-cli，tsconfig.json会自动生成。但是当我们更喜欢webpack bundler时，我们需要手动构建tsconfig.json。

Angular-cli.json 、 webpack.conf 和 tsconfig.json 之间的区别

Difference between Angular-cli.json , webpack.conf & tsconfig.json

tsconfig

angular-cli

angular

webpack.config.js