Откройте внешние переменные среды Rendu Ermai — env

Vue.js React.js
Откройте внешние переменные среды Rendu Ermai — env

Хранилище с открытым исходным кодом Xinbee Mall (открытый исходный код торгового центра H5, содержащий Vue 2.x и Vue 3.x, с интерфейсом API на стороне сервера):github.com/newbee-ltd

Vue 3.x + Vant 3.x + Vue-Router 4.x Высокая имитация учетной записи WeChat с открытым исходным кодом (с API-интерфейсом сервера):GitHub.com/Nick930826/…

предисловие

环境变量Концепция (переменных среды) незаметно вошла в видение фронтенда, когда фронтенд-инжиниринг стал популярным. В древнем интерфейсе не было концепции проектирования, а среда разработки, среда тестирования и среда генерации настраивались вручную всеми. и сейчасwebpack,snowpack,rollupКогда упаковочные инструменты становятся популярными, мы должны обратить на это внимание. В целой цепочке современной front-end разработки,环境变量Играет роль концентратора конфигурации проекта.По моему скромному мнению, я не люблю распыляться по мелочам.

Переменные среды в различных инструментах построения лесов

На фасаде есть различные инструменты для строительных лесов, такие какVue CLI,UmiJS,Vite,create-react-app,Nuxt.js,Next.jsПодождите, я думаю как фронтенд разработчик, я соприкасался с одним-двумя из вышеперечисленных инструментов.Если вы продвинутый игрок, вам не нужно читать дальше, потому что, читая документацию и собственные эксперименты , вы можете узнать, как получить переменные среды с помощью этих инструментов формирования шаблонов. А вот для начинающего фронтенда, который стремится построить среду разработки фронтенд проекта от 0 до 1, эту статью можно внимательно посмотреть, возможно, она будет вам полезна.

Vue CLI

должен сначала увидетьофициальная документация, не придумывайте и не запускайте все это во многих конфигурациях есть внутренние соглашения, так что не возитесь. В документации четко указано, что есть три режимаdevelopment,test,production, которые представляют разработку, тестирование и производство соответственно.

image.pngЭто можно установить в командной строке следующим образом:

"scripts": {
  "serve": "vue-cli-service serve",
  "build:beta": "vue-cli-service build --mode development",
  "build:release": "vue-cli-service build --mode production",
  "lint": "vue-cli-service lint"
}

image.png

соответствие имени файлаmodeконфигурация, когда вы запускаете командуnpm run build:betaКогда вы можете попасть в страницу.env.developmentпеременные, которые установлены внутри, следующим образом:

image.png

<template>
  <img alt="Vue logo" src="./assets/logo.png">
</template>

<script>
export default {
  name: 'App',
  setup() {
    console.log('env', process.env)
  }
}
</script>

image.png

Здесь следует уделить особое внимание Vue CLI должен использовать производственный режим при упаковке производственной среды, потому что, когда внутренний веб-пакет собирает код, он будет выбирать разные сценарии сборки в соответствии с NODE_ENV, а производственная среда определенно будет выполнять большую оптимизацию. , так что помните.

С помощью переменных среды некоторые ресурсы, необходимые в тестовой среде и рабочей среде проекта, можно динамически настраивать.

Vite

Vite 2.0Это новые строительные леса, выпущенные только в этом году, и они полны аромата. Я нашел предыдущую статью«Vite 2.0 + React + Ant Design 4.0 для создания среды разработки», есть лучший способ получить переменные среды, это то, что я получил отофициальная документациянайти в.

первыйpackage.jsonВнесите следующие изменения:

"scripts": {
  "dev": "vite --mode development",
  "build:beta": "vite build --mode beta",
  "build:production": "vite build --mode production",
  "serve": "vite preview"
},

существуетvite.config.js, можно получить в следующем видеmode:

export default ({ mode }) => defineConfig({
	...
})

На странице мы устанавливаем.env.document,.env.beta,.env.productionДля установки переменных соответствующего окружения файлы в трех вышеуказанных скриптах желательно иметь в следующем виде:

VITE_BASE_URL=http://www.development.baidu.com
VITE_BUILD_ENV=beta

пройти внутрь страницыimport.meta.envGet, результат печати выглядит следующим образом:

image.png

UmiJS

Также посмотрите наофициальная документацияописание следующим образом:

image.png

Ключевые словаUMI_ENV, вот я привожу примерconfigФорма конфигурации , создает базуumiпроект, конфигурация следующая:

image.png

config.beta.jsКод для выглядит следующим образом:

export default {
  define: {
    'process.env.BUILD_ENV': 'beta'
  }
}

config.release.jsКод для выглядит следующим образом:

export default {
  define: {
    'process.env.BUILD_ENV': 'release'
  }
}

В процессе запуска проекта вы можете во внутреннем скрипте, путемprocess.env.BUILD_ENVПолучите соответствующую переменную среды. Здесь можно настроить имя переменной среды.

Nuxt.js

Относительно просто настроить переменные среды, изменитьpackage.json Следующим образом:

"scripts": {
  "dev": "NODE_ENV=development nuxt",
  "build:beta": "NODE_ENV=beta nuxt build",
  "build:production": "NODE_ENV=production nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

После настройки передать в проектprocess.env.NODE_ENVполучить, бежатьyarn devРезультат печати следующий:

image.png

Конечно,nuxt.config.jsВнутренне может также пройтиenvКонфигурация, я не буду вдаваться в подробности здесь.

create-react-app

В официальной документации сказано, что у него всего две среды, одна из которых — среда разработки.development, другой - производственная средаproduction. Затем, как добавить тестовую среду, внутренняя страница не может определить, является ли производственная среда официальной или тестовой. После некоторых поисков я нашел библиотеку инструментов -dotenv-cli. установить его наdevDependencies:

yarn add dotenv-cli -D

Затем мы модифицируемpackage.json следующим образом:

"scripts": {
  "start": "react-scripts start",
  "build:beta": "dotenv -e .env.beta react-scripts build",
  "build:production": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

вареная рыба,.env.betaсоответствующий корневой каталог.env.beta,а такжеbuild:productionкоманда, значение по умолчанию соответствует.env.production,Следующим образом:

image.png

После запуска пакета вы можете пройтиprocess.env.REACT_APP_TITLEПолучите переменную среды, конкретное значение можно настроить самостоятельно, но, пожалуйста, используйтеREACT_APP_в начале, иначе он не будет распознан внутри. В противном случае при упаковке он будет получен по умолчанию.env.productionпеременная на .

Я пытаюсь запустить проект, набрав тестовый пакет, распечататьprocess.env Следующим образом:

image.png

Next.js

У меня больше нет с собой ББ, иди прямоpackage.json:

"scripts": {
  "dev": "BUILD_ENV=development next dev",
  "build:beta": "BUILD_ENV=beta next build",
  "build:production": "BUILD_ENV=production next build",
  "start": "next start"
}

такой же,Next.jsТолько среда разработки и производственная среда, нет разницы между формальной и тестовой, это пройденоBUILD_ENVпеременные среды, чтобы различатьbeta а такжеproduction. Далее настройте егоnext.config.js:

module.exports = {
  env: {
    BUILD_ENV: process.env.BUILD_ENV
  }
}

После этой конфигурации вы можете пройтиprocess.env.BUILD_ENVПолучите переменные среды, запустите среду разработки и распечатайте результаты следующим образом:

image.png

Суммировать

Сегодня фронтенд-инжиниринг глубоко укоренился в сердцах людей, и если вы хотите получить какие-то конкурентные преимущества на фронтенд-позициях, вы должны попытаться построить проект с 0 до 1, включая последующий запуск, оптимизацию и итерацию. . Вас всегда приютили ваши предшественники, и у вас никогда не будет существенного роста. Со временем вы начнете входить в состояние "вареных лягушек в теплой воде". Начнем с управления переменными среды. Давай.

Категории