Question

我正在构建一个angular4 /打字本桌面应用程序＆amp;混淆中间

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

有人可以解释以上3个配置文件中的主要概念差异＆amp;它们是为了什么？
我是否必须在项目中定义所有3个，或者只定义一个就足够了。

例如：路径ALIAS可以在其中所有3个中定义的WebPack / tsconfig /角-CLI。但哪一个比其他人受益？或者它们都一样，无论你使用哪种。
所以一般来说，他们都可以提供项目配置一个是性能最好的＆amp;建议作为最佳实践。

角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最好与打字稿一起使用，但你也可以使用dart和ES5 javascript来开发应用程序。现在

角cli.json

tsconfig.json

webpack.conf.js

<强>角cli.json

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

创建一个新的Angular应用程序
使用LiveReload支持运行开发服务器以预览您的发展期间的申请
为现有的Angular应用程序添加功能
构建您的应用程序以部署到生产

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

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

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

webpack.conf.js它也是一个捆绑器，它提供与angular cli相同的配置功能，但在webpack中你必须这样做如果出现角度cli，您可以手动利用Angular CLI命令行帮助，而无需了解详细信息

2）如果您通过CLI开发角度应用，则需要angular-cli.json和tsconfig.json

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

3）对于最佳实践，它更喜欢使用ANGULAR CLI，您可以查看官方文档

Answer 2

准确无误，

angular-cli.json 是针对角度应用的角度cli 生成器的配置文件，默认情况下在内部使用webpack

tsconfig.json是typescript编译器的配置文件

webpack.config是js / css的webpack bundler的配置文件。如果您更喜欢自己的开发工作流程，则需要使用此文件而不是angular-cli。

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

Answer 3

Wasiq答案很棒＆amp;我想分享一些可能有助于我了解angularcli.json＆amp; webpack.config.json更好。

无论技术堆栈如何，项目都需要拥有捆绑器。

Webpack.conf.js - Bundler

Webpack是捆绑器之一，因其带来的功能而非常受欢迎。它扫描import语句＆amp;维护一个依赖树，允许它只捆绑你的代码实际使用的资源和js文件。但它需要loaders和plugins配置，有时可能难以完成。

angular-cli - Bundler但提供了其他有用的功能，例如：生成预架构角应用或生成组件/服务

Angular团队创建了一个非常强大的捆绑工具anguar-cli，这就是它使用引擎盖下的Webpack ，已经预先配置好了，所以你可以享受这些好处，而无需配置麻烦。所以你不会错过webpack的功能，但angular-cli可以节省很多精力。

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

Angular-cli.json，webpack.conf＆amp; tsconfig.json

3 个答案: