feat: add disposable option

runtime-env · Mar 4, 2022 · b380d4b · b380d4b
1 parent 74f9fc0
commit b380d4b
Show file tree

Hide file tree

Showing 13 changed files with 151 additions and 1 deletion.
diff --git a/packages/cli/README.md b/packages/cli/README.md
@@ -52,6 +52,8 @@ Options:
  -e, --env <path> The .env file path to load (default: ".env")
  -x, --example <path> The .env example file path to load (default: ".env.example")
  -o, --output <path...> The output file paths to inject in-place (default: ["dist/**/*",".next/**/*",".nuxt/**/*",".output/**/*","build/**/*"])
+ --disposable Do not create backup files and restore from backup files. In local development, disable this option to avoid rebuilding the project when
+ environment variable changes, In production, enable this option to avoid generating unnecessary backup files.
  -h, --help display help for command
 ```
 

diff --git a/packages/cli/src/create-command.ts b/packages/cli/src/create-command.ts
@@ -9,6 +9,7 @@ export interface Args {
  env: string;
  example: string;
  output: string[];
+ disposable: boolean;
 }
 
 export const createCommand = () =>
@@ -27,6 +28,10 @@ export const createCommand = () =>
  defaultOutput
  )})`
  )
+ .option(
+ "--disposable",
+ "Do not create backup files and restore from backup files. In local development, disable this option to avoid rebuilding the project when environment variable changes, In production, enable this option to avoid generating unnecessary backup files."
+ )
  .action((args: Args) => {
  if (existsSync(args.example) === false) {
  console.error(

diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
@@ -36,7 +36,7 @@ export const main = (di: {
  const code = readFileSync(outputFileName, "utf8");
 
  if (placeholderVariants.some((p) => code.includes(p)) === false) return;
- copyFileSync(outputFileName, backupFileName);
+ if (!opts.disposable) copyFileSync(outputFileName, backupFileName);
 
  let outputCode = code;
  placeholderVariants.forEach((p) => {

diff --git a/packages/examples/@import-meta-env/cli/.env.example b/packages/examples/@import-meta-env/cli/.env.example
@@ -0,0 +1 @@
+HELLO=
diff --git a/packages/examples/@import-meta-env/cli/.gitignore b/packages/examples/@import-meta-env/cli/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+.DS_Store
+.cache
+public/*
+!public/index.html
diff --git a/packages/examples/@import-meta-env/cli/README.md b/packages/examples/@import-meta-env/cli/README.md
@@ -0,0 +1,60 @@
+# Setup
+
+1. Install package:
+
+ ```sh
+ $ pnpm i -D @import-meta-env/unplugin
+ $ pnpm i -D @import-meta-env/cli
+ ```
+
+1. Register `import-meta-env` plugin:
+
+ ```js
+ // webpack.config.js
+
+ const importMetaEnv = require("@import-meta-env/unplugin");
+
+ module.exports = {
+ // ...
+ plugins: [
+ // ...
+ importMetaEnv.webpack(),
+ ],
+ };
+ ```
+
+1. List public environment variables under `.env.example`.
+
+ ```
+ # .env.example
+ HELLO=
+ ```
+
+1. Set environment variables:
+
+ ```sh
+ $ export HELLO=import-meta-env
+ ```
+
+1. Start dev server:
+
+ ```sh
+ $ pnpm exec webpack --watch
+ ```
+
+ ```sh
+ $ serve dist -p 3000
+ ```
+
+1. Build production:
+
+ ```sh
+ $ pnpm exec webpack
+ ```
+
+1. Serve production:
+
+ ```sh
+ $ pnpm exec import-meta-env --disposable
+ $ pnpm exec serve dist
+ ```
diff --git a/packages/examples/@import-meta-env/cli/__fixtures__/index.html b/packages/examples/@import-meta-env/cli/__fixtures__/index.html
@@ -0,0 +1 @@
+<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="main.js"></script></head><body></body></html>
diff --git a/packages/examples/@import-meta-env/cli/__fixtures__/main.js b/packages/examples/@import-meta-env/cli/__fixtures__/main.js
@@ -0,0 +1,8 @@
+/******/ (() => { // webpackBootstrap
+var __webpack_exports__ = {};
+document.querySelector("body").innerHTML = `
+ <h1>Hello: ${({"HELLO":"import-meta-env"}).HELLO}</h1>
+`;
+
+/******/ })()
+;
diff --git a/packages/examples/@import-meta-env/cli/package.json b/packages/examples/@import-meta-env/cli/package.json
@@ -0,0 +1,22 @@
+{
+ "private": true,
+ "name": "cli-args-disposable-example",
+ "scripts": {
+ "dev:watch": "webpack --watch",
+ "dev:start": "serve dist -p 3000",
+ "dev": "rimraf bundle && cross-env HELLO=import-meta-env concurrently pnpm:dev:start pnpm:dev:watch",
+ "build": "rimraf dist && webpack",
+ "preview": "cross-env HELLO=import-meta-env import-meta-env --disposable && serve dist -p 4173"
+ },
+ "devDependencies": {
+ "@import-meta-env/cli": "workspace:*",
+ "@import-meta-env/unplugin": "workspace:*",
+ "concurrently": "7.0.0",
+ "cross-env": "^7.0.3",
+ "html-webpack-plugin": "^5.5.0",
+ "rimraf": "^3.0.2",
+ "serve": "^13.0.2",
+ "webpack": "^5.69.1",
+ "webpack-cli": "^4.9.2"
+ }
+}
diff --git a/packages/examples/@import-meta-env/cli/src/index.js b/packages/examples/@import-meta-env/cli/src/index.js
@@ -0,0 +1,3 @@
+document.querySelector("body").innerHTML = `
+ <h1>Hello: ${import.meta.env.HELLO}</h1>
+`;
diff --git a/packages/examples/@import-meta-env/cli/test.sh b/packages/examples/@import-meta-env/cli/test.sh
@@ -0,0 +1,11 @@
+set -e
+
+# set up
+rm -rf dist
+
+# act
+pnpm exec webpack
+pnpm exec cross-env HELLO=import-meta-env import-meta-env --disposable
+
+# assert
+diff -r dist __fixtures__
diff --git a/packages/examples/@import-meta-env/cli/webpack.config.js b/packages/examples/@import-meta-env/cli/webpack.config.js
@@ -0,0 +1,10 @@
+const importMetaEnv = require("@import-meta-env/unplugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+ plugins: [new HtmlWebpackPlugin(), importMetaEnv.webpack()],
+ optimization: {
+ // Make output files easier to read.
+ minimize: false,
+ },
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml