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

Question

我正在构建一个angular4 /打字本桌面应用程序并且介于两者之间

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

1. 有人可以解释以上3个配置文件中的主要概念差异及其用途是什么？

2. 我是否必须在我的项目中定义所有3个,或者只有一个就足够了.

   例如:路径ALIAS可以在其中所有3个webpack/tsconfig/angular-cli中定义.但哪一个比其他人受益？或者它们都一样,无论你使用哪种.

3. 因此,一般来说,它们都可以提供项目配置,以便最佳性能和推荐最佳实践.

角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开发应用程序.现在

角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)您需要angular-cli.json,tsconfig.json如果您通过CLI开发角度应用程序

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

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

Answer 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。

Answer 3

为了容易精确，

1. angular-cli.json是用于angular应用的 angular cli 生成器的配置文件，默认情况下内部使用webpack

2. tsconfig.json是打字稿编译器的配置文件

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

注意：如果将angular-cli用于angular应用，则tsconfig.json将自动生成。但是，当我们更喜欢webpack捆绑程序时，我们需要手动构建tsconfig.json。