Question

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

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

那里有太多不必要的垃圾但是我试图避免这种情况。我正在尝试理解所涉及的所有单个组件，因此我可以干净地构建我的构建过程，而无需工具“神奇地”为我处理它。

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

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

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

Answer 1

有很多方法可以构建Angular 2.工具是随着时间的推移会逐渐缓慢变化的东西之一。有一些初学者项目可以帮助您前进，但是能够自己构建您的工具，而不依赖于魔法是很有用的，即使您最终使用ng-cli结束了快乐路径。

以下是您需要的东西：

Node / NPM

Node是在命令行中运行的JavaScript。它是构建其他几乎所有其他东西的平台。

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

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

npm init

初始化一个新项目。

节点项目是疯狂的低技术。该项目将包含一个文件夹，其中包含package.json文件。 Package.json只是定义项目名称，描述，开发脚本和依赖项。这就是你所需要的。其余的由你决定。

的WebPack

Webpack是一个具有附加功能的JavaScript模块构建器。将其指向根文件，然后需要其他文件，它们将捆绑到托管依赖项树中。

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

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

npm install webpack -g

然后，为了更好地衡量，请在项目目录中安装本地副本：

npm install webpack --save-dev

TSC（TypeScript编译器）

这会将TypeScript转换为常规JavaScript。同样，它是一个npm安装。

npm install tsc --save-dev

并且很好，因为我们可能希望以后在项目目录之外使用命令行工具：

npm install tsc -g

打字稿装载机

现在您需要将TypeScript连接到Webpack。你用一个装载机做到这一点。标准适配器称为typescript-loader，但还有其他适配器。

npm install typescript-loader --save-dev

webpack.config.js

您需要在项目的根文件夹中使用一些配置文件。 webpack.config.js告诉webpack如何构建。这是一个微型版本，只指向app.js并构建app.build.js，使用typescript-loader进行编译。

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

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

{
  "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库。您可以使用typings来管理它们，也可以将它们粘贴在目录中。

在这里获取您的报名：

https://angular.io/docs/ts/latest/guide/typescript-configuration.html

运行它

因为我们有webpack，所以你应该能够运行：

webpack -wd

在项目的根目录中。

完成？

这里有很多调试。它需要一段时间才能做到这一点。此外，您的构建工具将随着时间的推移而发生变化，并且您希望保持最新状态。

此列表目前于2017年6月，但可能会很快过时。

对于最小的堆栈来说应该足够了。还有更多我们想要构建的内容。我们可能也想要：

使用Karma进行测试
SASS，使用Webpack构建
分开vendor.js和polyfills.js
Livereload，可能是live-server
NPM便利脚本
使用Yeoman创建代码

这一切都会改变......

Webpack是目前最好的构建工具，但还有其他工具。在Webpack之前，我们有Gulp，Browserify，Grunt甚至RequireJS。他们都做了自己的事情，并有自己的配置。手动保持工具链的最新状态可以占用一天中无关紧要的部分。

这就是为什么我们有像@ angular / cli这样的工具，这是一个社区努力，可以产生一个非常好的工具链来完成上述所有工作。它真的很快，而且几乎不会崩溃。

建立自己的工具链就像建立自己的光剑一样。当然，你可以在架子上买一把光剑，但要成为一个真正的绝地武士，你必须知道如何建造自己的光。

如何在没有Angular CLI等魔术工具的情况下成功构建角度2

1 个答案: