Как отладить сборку приложения Angular CLI с помощью пользовательской конфигурации веб-пакета - PullRequest
Новая
       96

Как отладить сборку приложения Angular CLI с помощью пользовательской конфигурации веб-пакета

1 голос
/ 27 апреля 2020

Начиная со стандартного CLI-приложения Angular 9, мне нужно было настроить сборку веб-пакета, чтобы мои файлы S CSS могли импортировать JSON конфигурации. Это означает, что в angular.json переход от 

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server"

к 

"serve": {
      "builder": "@angular-builders/custom-webpack:dev-server",
      "options": {
        "customWebpackConfig": {
          "path": "webpack.config.js"
        }
       ...

с webpack.config.js содержит следующее: 

const jsonImporter = require('node-sass-json-importer');

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.scss$|\.sass$/,
        use: [
          {
            loader: require.resolve('sass-loader'),
            options: {
              implementation: require('node-sass'),
              sassOptions: {
                // bootstrap-sass requires a minimum precision of 8
                precision: 8,
                importer: jsonImporter(),
                outputStyle: 'expanded'
              }
            }
          }
        ]
      }
    ]
  }
};

Проблема сейчас, в том, что после запуска ng serve я получаю пакетный / минимизированный код без сгенерированных исходных карт, что делает невозможной отладку. Что мне нужно сделать, чтобы имитировать c предыдущее поведение компоновщика по умолчанию? Как я могу вернуться к отладке из VS Code так, как я это делал со стандартным компоновщиком? Документы предлагают установить mode: 'development', но это, похоже, не имеет никакого эффекта.

1 Ответ

2 голосов
/ 07 мая 2020

Если честно, я не могу воспроизвести вашу проблему с исходными картами (я имею в виду js исходные карты, может быть, вы отключили их в браузере? Я обычно отключаю js исходные карты в angular приложениях для отладки ngfactories и т. Д. c), но я почти уверен, что вы попали в конфликтную проблему с правилами веб-пакетов.

Пожалуйста, измените вашу пользовательскую конфигурацию веб-пакета на следующую, чтобы понять проблему: 

const merge = require('webpack-merge');
const jsonImporter = require('node-sass-json-importer');

module.exports = function (defaultConfig) {

  console.log('>>>>> debug default config rules', defaultConfig.module.rules);

  const config = {
    mode: 'development',
    module: {
      rules: [
        {
          test: /\.scss$|\.sass$/,
          use: [
            {
              loader: require.resolve('sass-loader'),
              options: {
                implementation: require('node-sass'),
                sassOptions: {
                  // bootstrap-sass requires a minimum precision of 8
                  precision: 8,
                  importer: jsonImporter(),
                  outputStyle: 'expanded'
                }
              }
            }
          ]
        }
      ]
    }
  };

  return merge(defaultConfig, config);
}

В этом журнале вы увидите, что по умолчанию в конфигурации anguar уже есть два правила для /\.scss$|\.sass$/.
Первый для стилей компонентов или директив (component.scss): 

  {
    exclude: [
      '/Users/nikitabalakirev/Desktop/Projects/angular-webpack-custom-sass-rule-example/src/styles.scss'
    ],
    test: /\.scss$|\.sass$/,
    use: [ ... ]
  },

И второй для глобальных стилей: 

  {
    include: [
      '/Users/nikitabalakirev/Desktop/Projects/angular-webpack-custom-sass-rule-example/src/styles.scss'
    ],
    test: /\.scss$|\.sass$/,
    use: [
      ...
    ]
  },

Это означает, что ваши правила и правила по умолчанию перекрывают друг друга и это может привести к неожиданному поведению.
Что вы можете сделать с этой информацией:

  1. Если вам нужно scss файлов, чтобы иметь возможность импортировать json файлов, вам нужно изменить существующий по умолчанию Правило, не добавляйте свое, что-то в этом роде: 
const myRule =    {
              loader: require.resolve('sass-loader'),
              options: {
                implementation: require('node-sass'),
                sassOptions: {
                  // bootstrap-sass requires a minimum precision of 8
                  precision: 8,
                  importer: jsonImporter(),
                  outputStyle: 'expanded'
                }
              }
            }
const scssComponentRule = defaultConfig.module.rules.find(rule => rule.test.toString().includes('scsss'));
scssComponentRule.use.unshift(myRule);
Если для загрузки файлов jsons НЕ ВСЕ ваши файлы s css, используйте специальное имя домена для таких файлов:
test: /\.special\.scss$|\.sass$/, и имя файла, например styles.special.scss, но вы все равно нужно исключить их из Angular правил! Если вам не нужны правила Angular, вы можете удалить их из конфигурации по умолчанию. Но по моему опыту это огромная страница для поддержки приложения angular с пользовательскими правилами стилей. После каждого обновления он может обработать sh.

Совет: вы можете найти и изучить angular конфигурацию по умолчанию здесь

Также убедитесь, что ваш angular.json выглядит так: 

        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },

и 

        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "angular-webpack-custom-sass-rule-example:build"
          },
...