Различная разработка и конфигурация сборки с помощью web-ext - PullRequest
Новая
       31

Различная разработка и конфигурация сборки с помощью web-ext

2 голосов
/ 11 февраля 2020

Я работаю с проектом расширения браузера и хочу использовать другой URL-адрес, используемый в background.js во время разработки и сборки. Я хочу сделать это без необходимости поменять код между разработкой и сборкой. В серверном проекте я бы просто использовал переменные dotenv / environment, но это не доступно для расширений, которые эффективно работают на стороне клиента.

В background.js У меня есть fetch, использующий это api_base_url (мы также разрабатываем API); 

...
const api_base_url = 'http://127.0.0.1:8000/v1/'
...

Перед тем как я соберу (web-ext build), мне нужно вручную это что-то вроде: 

...
const api_base_url = 'http://a.domain.com/v1/'
...

В идеале это было бы что-то вроде: 

...
const api_base_url = ENV['API_BASE_URL']
...

и я бы имел .env в локальном dev; 

API_BASE_URL='http://127.0.0.1:8000/v1/'

и .env.production (или .env.build) из; 

API_BASE_URL='http://a.domain.com/v1/'

Это также проблема в manifest.json, где мне нужно добавить в белый список различные URL-адреса в permissions, например, 

"permissions": [
    "storage",
    "tabs",
    "https://a.domain.com/v1/*",
    "http://127.0.0.1:8000/v1/*"
  ]

Это не параметр времени выполнения для каждого пользователя, поэтому browser.storage и options.js не то, что мы ищем.

1 Ответ

3 голосов
/ 12 февраля 2020

Я понял это, но основной ответ c заключается в добавлении веб-пакета и использовании dotenv-webpack для файлов ввода, таких как background.js и copy-webpack-plugin, для файлов без ввода, таких как manifest.json. Эти плагины заменят строковые вхождения process.env.YOUR_VARIABLE_NAME значением process.env.YOUR_VARIABLE_NAME.

Это происходит буквально, и мне понадобилось несколько попыток, чтобы понять это. 

// .env
API_BASE_URL='http://127.0.0.1:8000/v1/'

// ./background.js
const api_base_url = process.env.API_BASE_URL

// manifest.json
"permissions": [
  "tabs",
  "process.env.API_BASE_URL*"
],

// webpack => ./dist/main.js
const api_base_url = 'http://127.0.0.1:8000/v1/'

// webpack => ./dist/manifest.json
"permissions": [
  "tabs",
  "http://127.0.0.1:8000/v1/*"
],

Вот webpack config; 

// ./webpack.config.js
const CopyPlugin = require('copy-webpack-plugin')
const DotenvPlugin = require('dotenv-webpack')
module.exports = (env) => {
  const dotenvPath = __dirname + '/.env.' + env

  const replaceWithProcessEnv = (content) => {
    for (var key in require('dotenv').config({ path: dotenvPath }).parsed) {
      content = content.replace(new RegExp('process.env.' + key, 'g'), process.env[key])
    }
    return content
  }

  return {
    plugins: [
      new DotenvPlugin(
        {
          path: dotenvPath,
          safe: true
        }
      ),
      new CopyPlugin(
        [
          {
            from: 'src/manifest.json',
            transform(content) {
              return replaceWithProcessEnv(content.toString())
            }
          }
        ]
      )
    ]
  }
}

Я сделал полный рабочий пример здесь; https://github.com/paulmwatson/web-ext-environments

...