如何在没有angular CLI等神奇工具的情况下成功构建angular 2

自从Beta版以来，我已经有了一个正常工作的Angular 2应用程序。早期的事情相当简单，构建过程主要是加载各种脚本文件并引用它们

有了systemjs，事情变得越来越复杂。每个教程和指南基本上都建议您复制整个node_modules/@angular文件夹

虽然里面有太多不必要的垃圾，我还是尽量避免。我试图理解所有涉及的单个组件，这样我就可以清晰地构建构建过程，而不需要工具“神奇地”为我处理它

我认为@angular/bundles中的bundle可以为我解决这个问题，我可以将它们复制到我的构建目录中，并在systemjs配置文件中引用它们。然而，情况似乎并非如此

当您尝试对RXJS执行相同操作时，会打开一整罐蠕虫，这取决于角度。这是另一个完整的文件夹，我被鼓励完全复制

---

引导和模块加载过程是否真的如此复杂，以至于我们应该鼓励开发人员依赖精心编制的种子库或angular cli等工具，而他们自己却不完全了解如何集成和加载所有内容？

构建angular 2有很多方法。工具是一种随时间慢慢漂移的东西。有一些入门项目可以帮助您继续进行，但是能够自己构建工具是很有用的，而不必依赖魔术，即使您最终使用

ng cli

走上了愉快的道路

以下是您需要的东西：

节点/NPM 节点是在命令行中运行的JavaScript。它是一个平台，几乎所有其他东西都是在这个平台上构建的

它附带一个名为NPM的包管理器，我们使用它来安装其他依赖项

创建一个新文件夹以存放项目。导航到它，然后键入：

npm init

初始化一个新项目

节点项目的技术含量极低。该项目将由一个文件夹组成，其中包含一个

package.json

文件。json仅定义项目名称、描述、开发脚本和依赖项。这就是你所需要的。剩下的就看你了

网页包 Webpack是一个JavaScript模块生成器，具有附加功能。将其指向根文件，然后需要其他文件，这些文件将被捆绑到托管依赖关系树中

Webpack有加载程序，可以让它与其他文件类型交互，特别是TypeScript和SASS

这是一个npm安装。使用以下工具获取命令行工具：

npm install webpack -g

然后在项目目录中安装一个本地副本：

npm install webpack --save-dev

TSC（类型脚本编译器） 这会将TypeScript转换为常规JavaScript。同样，这是一个npm安装

npm install tsc --save-dev

为了更好地衡量，因为我们以后可能需要从项目目录外部使用命令行工具：

npm install tsc -g

类型脚本加载器 现在您需要将TypeScript连接到Web包。你可以用加载器来完成。标准适配器称为typescript loader，但还有其他适配器

npm install typescript-loader --save-dev

webpack.config.js 在项目的根文件夹中需要一些配置文件。webpack.config.js告诉webpack如何构建。这里有一个微版本，它只指向app.js并构建app.build.js，使用typescript加载程序进行编译

module.exports =  {
  entry: {
    app: "./app/app.ts"
  },
  output: {
    filename: "./app.build/app.build.js",
  },
  resolve: {
    extensions: ['.js', '.ts']
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules')
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['typescript-loader'],
        tsconfig: './tsconfig,json'
      },
    ]
  }
}

tsconfig.json 现在您需要一些特定于角度的指令来告诉TypeScript如何构建角度代码。您需要告诉它有关装饰器的信息，并告诉它保留键入信息

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

打字 打字使TSC编译器可以使用JavaScript库。您可以使用

打字

来管理它们，也可以将它们粘贴到目录中

在这里输入您的文字：

运行它 因为我们有webpack，您应该能够运行：

webpack -wd

在项目的根目录中

完成？ 这里会有很多调试。这需要一段时间才能搞定。此外，您的构建工具将随着时间的推移而变化，您将希望保持最新

该列表于2017年6月发布，但可能很快就会过时

对于最小的堆栈来说，这应该足够了。我们可能还想在这方面做更多的工作。我们可能还希望：

• 因果报应的考验
• SASS，用Webpack构建
• 单独的vendor.js和polyfills.js
• Livereload，可能有实时服务器
• NPM便利脚本
• 用Yeoman生成代码

这一切都会改变。。。 Webpack是当前最好的构建工具，但也会有其他工具。在Webpack之前，我们有吞咽、浏览、咕哝，甚至是要求。他们都做自己的事情，有自己的配置。手动使工具链保持最新可能会占用您一天中相当多的时间

这就是为什么我们有@angular/cli这样的工具，这是一个社区的努力，以产生一个真正好的工具链，它可以完成上述所有和更多功能。它真的很快，而且几乎从不撞车

---

构建自己的工具链相当于构建自己的光剑。当然，你可以买现成的光剑，但要成为真正的绝地武士，你必须知道如何构建自己的光剑。

在JavaScript世界中，这是非常正确的。由于其复杂性、多样性和笨拙的API，现代工具很难学习（如果不是不可能的话）。要实现像捆绑这样的任务，通常需要大量复制粘贴配置代码。之所以看起来如此复杂，是因为不同的模块依赖于另一个感觉像是不必要的垃圾（但不是）的模块。这就是angular cli等工具的用武之地；构建您的应用程序，让我们集中精力构建应用程序，而不是集中精力集成依赖项，模块加载etcMost node_模块文件夹包含各种与开发相关的内容