Question

我正在尝试设置Angular 7来构建电子主和电子渲染器束。我正在使用@angular-builders/custom-webpack:browser作为构建器：

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "angular-electron-renderer": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {
                "@schematics/angular:component": {
                    "styleext": "scss"
                }
            },
            "architect": {
                "build": {
                    "builder": "@angular-builders/custom-webpack:browser",
                    "options": {
                        "customWebpackConfig": {
                            "path": "webpack-config/electron-renderer.js"
                        },

具有额外的配置：

const path = require("path");

module.exports = {
    "target": "electron-renderer",
    "entry": {
        "other": [path.join(__dirname, "../src/ng/fs-access.ts")]
    }
};

这确实将新条目成功添加到webpack配置并创建了新的捆绑包。但是target被忽略。

fs-access看起来像这样：

import { join } from "path";
import { readFileSync } from 'fs';

const path = join(__dirname, "../../package.json");

const packageJson = JSON.parse(readFileSync(path).toString());

console.log(`packageContent: ${packageJson.name}`);

并在按角度编译时会出错（由于fs，path和--dirname而导致）。

在webpack中，将target添加到配置中可以解决这些相同的问题。

有效的webpack配置：

const path = require('path');

module.exports = {
  entry: './src/ng/fs-access.ts',
  mode: "development",
  target: "electron-renderer",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

我已经检查过，并且在这两个构建中，target中的electron-renderer已成功在webpack配置中传递，并且在我的代码中设置和正在构建之间的任何地方都没有覆盖...

GitHub存储库：https://github.com/Roaders/angular-electron-chrome/tree/ecc4e21b0e5502680b7bbe0b8fb0c74b95dc2a12

运行npm run build进行角度构建，运行npm run webpack进行webpack构建

在@ angular-builders / custom-webpack：browser

0 个答案: