Как использовать пользовательскую конфигурацию веб-пакета в Ionic 4 - PullRequest
Новая
       15

Как использовать пользовательскую конфигурацию веб-пакета в Ionic 4

1 голос
/ 16 июня 2019

Как я могу расширить конфигурацию Webpack по умолчанию и использовать пользовательскую?

Я пытаюсь использовать пакет, который требует дополнительной настройки веб-пакета, и я не уверен, как это сделать.Со времен Angular 6 это было довольно сложно сделать.Кто знает, как?

Я пробовал следовать некоторому учебнику:

  1. https://javascripttuts.com/using-a-custom-webpack-configuration-in-an-ionic-4-application/
  2. https://alligator.io/angular/custom-webpack-config/

Какойпривел меня к 

@angular-builders/dev-server:generic

и 

@angular-builders/custom-webpack:browser

Я, однако, столкнулся с ошибкой всякий раз, когда я пытаюсь построить, обслуживать. 

Schema validation failed with the following errors:
  Data path ".builders['browser']" should have required property 'class'.

Ответы [ 2 ]

0 голосов
/ 26 июня 2019

Обратитесь, если у вас есть сомнения

TypeORM от npm: 

$ cd ionic-crm
$ npm install typeorm --save

На момент написания статьи будет установлено typeorm v0.2.16.

Далее установите Node.js типы: 

$ npm install @types/node --save-dev

Поскольку мы будем проводить тестирование в браузере, нам также нужно установить sql.js: 

$ npm install sql.js --save

На момент написания статьи будет установлено sql.js v0.5.0.

Затем откройте файл tsconfig.json и добавьте "typeRoots": ["node_modules/@types"] в compilerOptions, если его там еще нет.

Затем откройте файл src / tsconfig.app.json и измените его соответствующим образом: 

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["node"],
    "paths": {
      "typeorm": ["node_modules/typeorm/browser"]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Добавление пользовательской конфигурации веб-пакета Затем создайте пользовательский файл конфигурации Webpack в корне вашего проекта: 

$ touch custom.webpack.config.js

Откройте файл custom.webpack.config.js и добавьте следующий код: 

const webpack = require('webpack');
console.log('The custom config is used');
module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            'window.SQL': 'sql.js/js/sql.js'
        }),
        new webpack.NormalModuleReplacementPlugin(/typeorm$/, function (result) {
            result.request = result.request.replace(/typeorm/, "typeorm/browser");
        })
    ],
    node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    },
    optimization: {
        minimize: false
    }
};

Затем вернитесь к своему терминалу и установите пакеты @ angular-builders / custom-webpack и @ angular-builders / dev-server из npm: 

$ npm install --save @angular-builders/custom-webpack
$ npm install --save @angular-builders/dev-server

Будут установлены пакеты @angular-builders/custom-webpack v7.4.3 и *@angular-builders/dev-server v7.3.1 *.

В конструкторе @angular-devkit/build-angular:dev-server используется пользовательский конструктор веб-пакетов для получения конфигурации веб-пакета. В отличие от стандартного @ angular-devkit / build-angular: dev-server, он не использует @ angular-devkit / build-angular: конфигурацию браузера для запуска сервера разработки. Если вы используете @ angular-builders / dev-server: generic вместе с @ angular-builders / custom-webpack: browser, ng serve будет работать с пользовательской конфигурацией, предоставленной в последнем.

Теперь откройте файл angular.json, найдите запись projects -> app -> architect -> build -> builder и замените @ angular-devkit / build-angular: браузер на @angular-builders/custom-webpack:browser.

Далее, под объектом параметров добавьте 

"customWebpackConfig": {"path": "./custom.webpack.config.js"}:

  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom.webpack.config.js"
            },

Затем измените свойство построителя в свойстве serve на @ angular-builders / dev-server: generic: 

 "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {},
        "serve": {
          "builder": "@angular-builders/dev-server:generic",
          "options": {
            "browserTarget": "app:build"
          },

Теперь, если вы снова обслужите свое приложение, будет использоваться пользовательская конфигурация Webpack, и вы должны увидеть сообщение «Custom config is used», отображаемое на вашем терминале.

0 голосов
/ 26 июня 2019

Мне не хватает представителя, чтобы комментировать, будет лучше, если вы добавите свой код package.json и angular.json. Попробуйте понизить пакет "@ angular-devkit / build-angular" до ^ 0.12.X,если вы используете v6 из "@ angular-builders / custom-webpack".

...