我正在构建一个angular4/typescript桌面应用程序&在之间混淆
angular-cli.jsontsconfig.jsonwebpack.conf.js
- 有人能解释一下以上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)As 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也是一个bundler，它提供了与angular cli相同的配置功能，但在webpack中必须这样做手动使用angular cli时，您可以在不了解详细信息的情况下利用angular cli命令行帮助
2)如果您通过CLI 开发angular应用程序，则需要angular-cli.json和tsconfig.json
如果使用自己的bundler(如webpack或systemjs)，您可以拥有tsconfig.json和bundler配置文件(在本例中为webpack.config.js )
3)对于最佳实践，它更喜欢使用ANGULAR CLI，您可以查看官方文档
Wasiq的回答很棒&我想分享一些更多的汇总信息，这些信息可能有助于我理解angularcli.json&webpack.config.json较好。
一个项目需要有一个bundler，而不考虑技术堆栈。
Webpack.conf.js-Bundler
Webpack是一个非常受欢迎的bundler，因为它提供了一些功能。它扫描导入语句&维护一个依赖树，它只允许捆绑代码实际使用的资源和js文件。但它需要CCD_ 14和CCD_。
angular cli-Bundler，但提供了其他有用的功能，例如：生成预先搭建的angular应用程序或生成组件/服务
Angular团队创建了anguar-cli，这是一个非常强大的bundler工具，其美妙之处在于它使用了已经预先配置好的Webpack，因此您可以在没有配置麻烦的情况下享受这些好处。所以你不会错过webpack的功能，但angular cli可以节省很多精力。
您仍然可以访问项目配置文件，如karma.conf.js、dractor.conf.js，tslint.json、tsconfig.json和package.json。
为了更准确地说，
-
angular cli.json是angular应用程序的angular cli生成器的配置文件默认情况下在内部使用webpack
-
tsconfig.json是typescript编译器的配置文件
-
webpack.config是js/css的webpack-bundler的配置文件。如果您喜欢自己的开发工作流程，则需要此文件，而不是angular cli。
注意：如果您对angular应用程序使用angular cli，将自动生成tsconfig.json。但是，当我们更喜欢webpackbundler时，我们需要手动构建tsconfig.json。