Режим выпуска Typescript и настройка режима отладки

Question

Я использую Typescript так, что есть много различий в Release Mode и Debug Mode. В Debug Mode я использую http://localhost:port/ basi c URL. Однако , в Release Mode Я должен использовать https://www.example.com/

Основная проблема

это заставляет меня изменить URL с в Release Mode и Debug Mode неоднократно , Действительно , есть и другие параметры, которые я должен изменить в Release Mode и Debug Mode вручную, что может привести к ошибкам в настройке .

Что я ищу

избегая ручной настройки в Release Mode и Debug Mode

Подсказки и предположения

может быть способ использования Macros в Typescript аналогично тому, что мы будем использовать в MsBuild или WebConfig, например $(ConfigurationName) и $(ProjectDir)

Лучшее желаемое решение, которое я ищу

Самое простое решение, в котором не нужно изучать Extra и не изменять архитектуру проекта. IF Мне нужно использовать webpack, пожалуйста, приложите все подробности.

Каркас проекта

Asp.net .Net Framework или Asp.Net Core

Минимальный воспроизводимый код

Считайте, что вы хотите ТОЛЬКО изменить этот URL

const URL = http://localhost:port/

На

const URL = https://www.example.com/

в Release Mode

Возможные жесткие решения

как @ Ка ca992 предлагается webpack может решить проблему, используя

mode: 'development' и mode: 'production', например:

module.exports = {
  mode: 'development'
};

режим производства и разработки дополнительно информация

Но у вышеприведенного решения есть следующие минусы:

• Требуется время для изучения webpack
• Необходимо ознакомиться с основными понятиями npm
• Необходимо ознакомиться с концепциями связывания и минимизации
• Требуется работа с модулями (импорт / экспорт)

Answer 1

Вы должны будете использовать переменную окружения и делать проверки на основе этого. Вы можете создать вспомогательный метод, подобный следующему:

export function isProduction() {
    return process && process.env && process.env.NODE_ENV === 'production';
}

Только будьте осторожны, чтобы большинство сборщиков не смогли удалить этот код (это должна быть встроенная проверка, чтобы он был удален во время компиляции). Если вы используете что-то вроде веб-пакета, вы можете легко включить переменную NODE_ENV, используя https://webpack.js.org/plugins/define-plugin/.

Это также отличное чтение в топи c: https://overreacted.io/how-does-the-development-mode-work/

Также хороший способ справиться с этим, если у вас много разных настроек, - это сгруппировать все разные значения в вспомогательном модуле:

debug.config.ts release .config.ts

, а затем в своем коде вы используете config.ts, который просто реэкспортирует на основе вашей конфигурации:

import * as debug from debug.config.ts;
import * as release from release.config.ts;

const config = isProduction() ? release : debug;

export default config;

Answer 2

Я нашел простой способ настроить параметры Release Mode и Debug Mode без использования webpack и других Extensions с помощью Способность Native Typescript .

я сделал config.ts файл и поместил его поверх всех других файлов .js и, используя window.location.host, я получил доменное имя, что файл .js уже используется.

/* put this configuration file at top of the other js files in order to make
   sure the parameters will be initiated before use */

let basic_URL: string;
let velocity: number;
let delay: number;
let token: string;

(function () {
    'use strict';
    // Release Mode 
    if (window.location.host == "www.example.com") {
        basic_URL = "https://www.example.com/";
        velocity = 50;
        delay = 100;
        token = "Release Mode Token"
        /*Assign Other Release Mode Parameters*/
    }
    // Debug Mode
    else {
        basic_URL = "http://localhost:1234/";
        velocity = 500;
        delay = 1000;
        token = "Debug Mode Token"
        /*Assign Other Debug Mode Parameters*/
    }
})();

---

ПРИМЕЧАНИЕ: Это решение не означает, что я не буду искать другое решение.