尽管我想在Angular-CLI6中使用Electron，但是……

2 年 ago
雅, 悟
3 minutes

首先
初めに

我以前写过关于在@angular/cli中使用Electron的文章，但久违了一下子想着要在Angular和Electron中写点东西，但最新的Angular-CLI6却没有ng eject，无法编辑webpack是吧。连在angular.json中也不能配置……。

我查了一下，似乎基本上需要扩展CLI的构建器才行。只是想要添加一个’target: ‘electron-renderer’的句子而已…

所以，暂时先试试看。

请提供更多上下文信息。这个词语的英文原式是什么？

    • https://medium.com/dailyjs/angular-cli-6-under-the-hood-builders-demystified-f0690ebcf01

 

    https://stackoverflow.com/questions/51069290/angular-cli-6-custom-builder

顺便提一下，npm上已经有一个叫ng-electron-devkit的东西了。
还有一个模板叫maximegris/angular-electron，它通过修改builder来解决问题（坦白说这个更简单，推荐使用）。

环境

    • @angular-devkit/architect: 0.7.4

 

    • @angular-devkit/build-angular: 0.7.4

 

    • @angular-devkit/core: 0.7.4

 

    • rxjs: 6.2.2

 

    typescript: 3.0.1

非常简化的说明

    • devkit（CLIの中身）内のBuilderを拡張してElectron用Buidlerを定義します。

 

    • npmパッケージ化します。

 

    • 使いたいプロジェクトにそのパッケージをインストールします。

angular.jsonに作ったBuilderを使うように定義します。

扩展并定义Builder

准备包装

首先，创建一个专门用于Builder的软件包。

$: mk パッケージ名
$: cd パッケージ名
$: npm init
$: npm install --save @angular-devkit/architect @angular-devkit/build-angular @angular-devkit/core @types/node rxjs typescript

所有操作都在根目录上执行。

准备Schema。

Buidler需要定义模式。这是用来解决angular.json上的选项等的模式。
这次我们将在angular.json中准备一个选项，以便可以指定各种目标。
在devkit中有一个schema.json文件（https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/dev-server/schema.json），可以复制过来并进行更改（我们将其命名为webpackCompileTarget）并添加选项。

{
  "id": "ElectronBrowserSchema",
  "title": "Electron browser schema for Build Facade",
  "description": "Electron browser target options",
  "properties": {
    ====省略====
    "webpackCompileTarget": {
      "type": "string",
      "description": "webpack compile target",
      "default": "browser"
    }
  },
  ====省略====
}

根据上述设定的架构，准备接口。

import { NormalizedBrowserBuilderSchema } from '@angular-devkit/build-angular';

export interface ElectronBrowserSchema extends NormalizedBrowserBuilderSchema   {
  webpackCompileTarget: string;
}

扩展Buidler

对DevServerBuilder进行扩展，位于devkit内部。

import { BuilderConfiguration, BuilderContext, BuildEvent } from '@angular-devkit/architect';
import { BrowserBuilder, BrowserBuilderSchema, NormalizedBrowserBuilderSchema } from '@angular-devkit/build-angular';
import { Path, virtualFs } from '@angular-devkit/core';
import { Observable } from 'rxjs';
import { Stats } from 'fs';
import { ElectronBrowserSchema } from './schema';

export class ElectronBrowserBuilder extends BrowserBuilder {

  constructor(context: BuilderContext) {
    super(context);
  }

  run(builderConfig: BuilderConfiguration<BrowserBuilderSchema>): Observable<BuildEvent> {
    return super.run(builderConfig);
  }

  buildWebpackConfig(
    root: Path,
    projectRoot: Path,
    host: virtualFs.Host<Stats>,
    options: ElectronBrowserSchema
  ) {
    const browserConfig = super.buildWebpackConfig(root, projectRoot, host, options);
    return Object.assign({}, browserConfig, {
      target: options.webpackCompileTarget
    });
  }
}

export default ElectronBrowserBuilder;

只是在修改webpack配置中的目标而已。

构建者. json

写建造者的配置文件（文件名可以随意取）。

{
  "$schema": "@angular-devkit/architect/src/builders-schema.json",
  "builders": {
    "dev-server": {
      "class": "./electron-browser.js",
      "schema": "./schema.json",
      "description": "Electron browser builder"
    }
}

将”$schema”: “@angular-devkit/architect/src/builders-schema.json”视为魔法咒语就行了，剩下的就是给每个定义分配文件而已。

npm build等

Explanation:
There are multiple ways to paraphrase the phrase “npm build” in Chinese, as it depends on the context. However, the provided phrase can be directly translated into “npm build等” in Chinese. “等” is a particle that means “and so on” or “et cetera”, indicating that there may be other related commands in addition to “npm build”.

在package.json文件中添加”scripts”: {“build”: “tsc”}，以便进行构建。
同时添加”builders”: “builders.json”，以确保调用方能找到Buidler。

暫時先建造者的封裝已經完成。

使用方式

在使用本项目时，您可以将上述的Builder打包为本地包，或者上传到npm并进行安装：npm install –save-dev Builder包名。
然后编辑angular.json。
在此次配置中，我们将更改常规构建设置的builder，并添加webpackCompileTarget。

{
=====省略=====
  "projects": {
    "プロジェクト名": {
      =====省略=====
      "architect": {
        "build": {
          "builder": "Builderパッケージ名:browser",
          "options": {
            "outputPath": "dist/プロジェクト名",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "webpackCompileTarget": "electron-renderer"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        }
      }
      =====省略=====
    }
  }
=====省略=====
}

最后

如果需要DevServer，只需按照相同的步骤扩展DevServerBuilder。
由于我对CLI的Builder本身不太了解，所以对这个是否可行存在一些疑虑……。
哎，真的只是想要设置target: electron-renderer，觉得这些步骤有点麻烦。

bannerAds