Socket
Socket
Sign inDemoInstall

parcel-transformer-env-variables-injection

Package Overview
Dependencies
0
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    parcel-transformer-env-variables-injection

Parcel plugin that injects env varaibles into a file


Version published
Maintainers
1
Install size
4.09 kB
Created

Readme

Source

parcel-transformer-env-variables-injection

Parcel plugin that injects env varaibles into a file

npm i -DE parcel-transformer-env-variables-injection

Web extension example configuration

manifest.json
  "some_manifest_property": "{{{ MY_ENV_VARIABLE }}}",
Update .parcelrc and add plugin to transformers
{
  "extends": "@parcel/config-webextension",
  "transformers": {
    "manifest.json": ["parcel-transformer-env-variables-injection", "..."]
  }
}

HTML file example

src/index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>My First Parcel App</title>
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="app.js"></script>
  </head>
  <body>
    <h1>{{{ MY_ENV_VARIABLE }}}</h1>
  </body>
</html>
Update .parcelrc and add plugin to transformers
{
  "transformers": {
    "index.html": [
      "parcel-transformer-env-variables-injection",
      "..."
    ]
  }
}

How can I define env variables in Parcel?

  1. By creating .env file in repo root directory
  2. By adding env variable to package.json start and/or build script
{
  "name": "my-project",
  "source": "src/index.html",
  "scripts": {
    "start": "MY_ENV_VARIABLE=foo parcel",
    "build": "MY_ENV_VARIABLE=bar parcel build"
  },
  "devDependencies": {
    "parcel": "latest"
  }
}
  1. For more advance, dynamic variables you can write JS scripts.

package.json

"build": "node ./my-customs-script.js",

my-customs-script.js

process.env.MY_ENV_VARIABLE = Date.now().toString()

execSync('yarn parcel build', { stdio: 'inherit' })

Troubleshooting

  1. Run clear task if it's defined in package.json or run rm -rf build/ .parcel-cache command to clean up Parcel cache.

Keywords

FAQs

Last updated on 16 Jun 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc