Подготовка к производству без перестройки - PullRequest
Новая
       40

Подготовка к производству без перестройки

0 голосов
/ 09 июля 2019

У меня есть пакет, созданный с помощью веб-пакета в производственном режиме. Сейчас используется для постановки. Мы говорим о статических файлах index.html и bundle.js. Теперь я хочу развернуть для производства, но вместо того, чтобы перестраивать другой пакет для производства, как эффективно заменить только переменные текущего STAGING пакета?

Например: 

// bundle.js
process.env.API_PATH = "api-staging.domain.ext";
console.log(process.env.API_PATH);
// code of the whole project...

// now we want to deploy the same thing to production:
process.env.API_PATH = "api.domain.ext";
console.log(process.env.API_PATH);
// code of the whole project...

Теперь я просто не хочу строить заново только ради этого небольшого изменения. Я хочу изменить только параметры в одном комплекте. Возможно ли это и как?

Ответы [ 2 ]

0 голосов
/ 09 июля 2019

Я решил проблему без необходимости создания комплекта несколько раз.Он должен быть собран только один раз.

Сделайте так:

Создайте папку с именем «static», лучше поместить ее в корневой каталог проекта.Эта папка будет содержать ваш файл переменных среды.Этот файл будет РАЗЛИЧНЫМ для каждой среды.Это означает, что если вы используете локальный dev, вы помещаете туда локальные конфигурации dev.Если вы находитесь на стадии подготовки или производства, вы размещаете свой контент соответственно.

Перейдите в конфигурацию вашего веб-пакета и добавьте плагин copy-webpack-плагин: 

// first install the plugin
npm install --save-dev copy-webpack-plugin

// then configure it on your webpack config
const CopyPlugin = require('copy-webpack-plugin');
new CopyPlugin([
  { from: 'static' },
]),

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

Затем в файле index.html перед закрытием тега заголовка (а не тега body) вы добавляете следующее: 

<script src="env.js" charset="utf-8"></script>

Таким образом, он будет загружен перед пакетом.Помните, что мы собираемся создать пакет производственного режима только один раз.

Если вы используете плагин Html webpack, он автоматически сгенерирует ваш index.html и поместит его в dist.

Теперь включенов каждой среде переменные будут сопоставляться.

Чтобы сервер webpack работал так, чтобы это работало, вы должны использовать contentBase, указывающий на статическую папку: 

devServer: {
    contentBase: resolvePath("static")
  },

Итак, webpackоттуда получит статическое содержимое для использования на сервере разработки.

0 голосов
/ 09 июля 2019

Есть эффективные библиотеки для управления средами наряду с webpack, такие как:

  1. dotenv
  2. Функция веб-пакета по умолчанию для управления несколькими средами

Я предлагаю вам воспользоваться вторым вариантом.

...