Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vite-plugin-html-env

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vite-plugin-html-env

A vite plugin for rewriting html

  • 1.2.5
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
11K
increased by12.2%
Maintainers
1
Weekly downloads
 
Created
Source

vite-plugin-html-env npm

A Vite Plugin for rewriting html

English | 简体中文

Usage

npm install --save-dev vite-plugin-html-env
# or
yarn add vite-plugin-html-env -D
// vite.config.js
import VitePluginHtmlEnv from 'vite-plugin-html-env'

export default {
  plugins: [
    VitePluginHtmlEnv(),
    // or
    // VitePluginHtmlEnv({
    //  CUSTOM_FIELD
    // })

    // Customizable prefixes and suffixes
    // VitePluginHtmlEnv({
    //   prefix: '<{',
    //   suffix: '}>',
    //   envPrefixes: ['VITE_', 'CUSTOME_PREFIX_']
    // })

    // Enable new compile mode by default
    // 1. add directives => vite-if, vite-else
    // 2. Compatible with `import.meta.env.VITE_APP__****`
    // If there are compatibility issues with the new version, please raise the `issue` or submit a `merge request`, I will deal with it promptly in my personal free time.
    VitePluginHtmlEnv({
      compiler: true
      // compiler: false // old
    })
  ]
}

It is recommended to use VITE_APP_ as the key prefix.

# .env
VITE_APP_TITLE=测试标题
VITE_APP_HOST=dev.sever****.com

# .env.build-prod
VITE_APP_TITLE=生产标题
VITE_APP_HOST=prod.sever.****.com
{
  "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "build:prod": "tsc && vite build --mode build-prod",
  }
}

By default, the local environment reads the .env file.Read the corresponding .env.*** file, when you configure the --mode command.Vite configuration instructions for .env files Env Variables and Modes

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- Version 1.0.4 uses prefix = <{ and suffix = }> by default -->
    <!-- but is also compatible with older versions of prefixes and suffixes -->

    <!-- <script src="//<% VITE_APP_HOST />/***.js"></script> -->
    <!-- <title><% VITE_APP_TITLE /></title> -->

    <script src="//<{ VITE_APP_HOST }>/***.js"></script>
    <link rel="stylesheet" href="//<{ VITE_APP_HOST }>/test.css" />
    <title><{ VITE_APP_TITLE }></title>

    <!-- compiler: true -->
    <!-- Example 1 -->
    <!-- VITE_APP_ENV = dev -->
    <script vite-if="import.meta.env.VITE_APP_ENV === dev">
      console.log('vite-if')
    </script>
    <script vite-else>console.log('vite-else')</script>

    <!-- Example 2 -->
    <script vite-if="<{ VITE_APP_ENV }> !== dev">
      console.log('vite-if')
    </script>
    <script vite-else>
      console.log('vite-else')
    </script>

    <!-- Example 3 -->
    <!-- VITE_APP_NUM_9 = 9 -->
    <script vite-if="import.meta.env.VITE_APP_NUM_9 < 10">
      console.log('9 < 10')
    </script>
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Options

prefix

  • Type: string
  • Default: '<{'

suffx

  • Type: string
  • Default: '}>'

envPrefixes

Set the prefixes attribute of the loadEnv method in dev mode, vite uses VITE_ as the prefix of environment variables by default.

  • Type: string | string[]
  • Default: VITE_

compiler

  • Type: boolean
  • Default: true

The new version of the plugin is enabled by default, and the template compilation mode is added, which contains new directives vite-if and vite-else, new parsing rules import.meta.env.VITE_APP_***.

enforce

  • Type: string
  • Default: null

The value of enforce can be either "pre" or "post". plugin-ordering

compress

  • Type: boolean
  • Default: false

Simple compression: remove spaces and line breaks

Keywords

FAQs

Package last updated on 25 Sep 2022

Did you know?

Socket

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
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc