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

Posted 2023-04-13

【中文标题】Angular-cli.json 、 webpack.conf 和 tsconfig.json 之间的区别

【英文标题】：Difference between Angular-cli.json , webpack.conf & tsconfig.json

【发布时间】：2018-05-01 11:36:57

【问题描述】：

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

angular-cli.jsontsconfig.jsonwebpack.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);

【参考方案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。 Typescript 必须使用 tsc 编译器“转译”成 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 的最佳实践，您可以查看官方文档

【讨论】：

这正是我正在寻找的信息。非常感谢！

【参考方案2】：

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

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

Webpack.conf.js - 捆绑器

Webpack 是非常流行的打包工具之一，因为它带来了很多功能。它扫描 import 语句并维护一个依赖树，它允许它只捆绑你的代码实际使用的资源和 js 文件。但它需要loaders 和plugins 配置，有时可能很难执行。

angular-cli - Bundler，但提供其他有用的功能，例如：生成预先搭建的 Angular 应用程序或生成组件/服务

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

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

【参考方案3】：

为了容易精确，

angular-cli.json 是 angular cli generator for angular apps 的配置文件，内部默认使用 webpack

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

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

注意：如果你在 Angular 应用中使用 angular-cli，tsconfig.json 会自动生成。但是当我们更喜欢 webpack bundler 时，我们需要手动构造 tsconfig.json。