web-dev-qa-db-ja.com

Angularの違い-cli.json、webpack.conf、tsconfig.json

私はangular4/TypeScriptデスクトップアプリを構築していて、その間で混乱しています

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

  1. 上記の3つの構成ファイルの主な概念の違いとその目的を誰かに説明してもらえますか？

  2. プロジェクトで3つすべてを定義する必要がありますか、それとも1つだけで十分です。

    例：パス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);
angularangular-clitsconfigwebpack.config.js
8
Maverick09

1） Angular4はTypeScriptで使用するのが望ましいので、アプリケーションの開発にはDartとES5javascriptをうまく使用することもできます。今

角度-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では、angularcliの場合と同様に手動で行う必要があります。詳細情報を知らなくてもAngularCLIコマンドラインヘルプの利点

2） CLIを使用してangularアプリを開発する場合は、angular-cli.jsonとtsconfig.jsonが必要です

webpackやsystemjsのような独自のバンドラーを使用している場合は、tsconfig.jsonとバンドラー構成ファイル（この場合はwebpack.config.js）を使用できます。

）ベストプラクティスについては、ANGULARCLIを使用することをお勧めします。公式ドキュメントを確認できます。

9
Wasiq Muhammad

簡単に正確に、

  1. angular-cli.jsonはangular cli generator for angular appsの構成ファイルです。デフォルトで内部的にwebpack

  2. tsconfig.jsonはTypeScriptコンパイラの設定ファイルです

  3. webpack.configは、js/css用のwebpackbundleの設定ファイルです。独自の開発ワークフローを好む場合は、angular-cliの代わりにこのファイルが必要です。

注：angular appsにangular-cliを使用すると、tsconfig.jsonが自動的に生成されますが、手動で作成する必要があります- tsconfig.json webpackバンドラーを使用する場合。

5
Srinivasan K K

Wasiqの答えは素晴らしいです。私が理解するのに役立つかもしれないいくつかのより集約された情報を共有したいと思いますangularcli.json＆webpack.config.jsonより良い。

テクノロジースタックに関係なく、プロジェクトにはバンドラーが必要です。

Webpack.conf.js-Bundler

Webpackは、テーブルにもたらす機能のために非常に人気のあるバンドラーの1つです。 importステートメントをスキャンし、依存関係ツリーを維持します。これにより、コードが実際に使用するリソースとjsファイルのみをバンドルできます。ただし、loadersおよびpluginsの構成が必要であり、これを実行するのは少し難しい場合があります。

angle-cli-Bundlerですが、他の便利な機能を提供します。例：事前にスキャフォールドを生成するangularアプリ、またはコンポーネント/サービスを生成する

Angularチームはanguar-cliを作成しました–非常に強力なバンドラーツールです。美しさはこれです内部でWebpackを使用します、すでに事前構成されているので、構成の手間をかけずにメリットを享受できます。したがって、webpackの機能を見逃すことはありませんが、angular-cliは多くの労力を節約します。

Karma.conf.js、protractor.conf.js、tslint.json、tsconfig.json、package.jsonなどのプロジェクト構成ファイルには引き続きアクセスできます。

5
Maverick09