@zhupengji/create-config v1.0.3
create-config
CC(create-config) is a tool to generate a front-app-configuration-file for web pages' deployment.
Get Started
npm i --save-dev create-config
add a quick script in package.json
:
{
"scripts": {
"config": "create-config"
}
}
If you have a .env
file, and there are variables starts with config_
config_XXXX=XXXX
After run npm run config
, then you can find dist/_app.config.js
contains the content:
window.APP_CONFIG = {
config_XXXX: "XXXX",
};
Object.freeze(window.APP_CONFIG);
Object.defineProperty(window, "APP_CONFIG", {
configurable: false,
writable: false,
});
Or your can custom your own prefix by additional -x
, for example:
{
"scripts": {
"config": "create-config -x VITE_"
}
}
Usage
- Modify your html entry file manually or by tools like webpack.
<script src="./_app.config.js"></script>
- Using global config data in condition.
function getGlobalConfig() {
if (process.env.NODE_ENV === "production") return window["APP_CONFIG"];
// ... otherwise
}
Further
Javascript API
You will rarely to use this. It's recommended to use in the npm-scripts way.
Use in your node code, usually at post-build
stage. Provide the config
object.
const { createConfig } = require("create-config");
createConfig({
config: {
config_api_url: "http://localhost:8080",
},
});
options
key | default | description |
---|---|---|
config | - | required |
output | "dist" | - |
configName | "APP_CONFIG" | - |
configFileName | "_app.config.js" | - |
prefix | "config_" | case sensitive; if you use vite, maybe VITE_ |
packageName | - | npm_package_name + npm_package_version |
CLI
We provided a CLI for convenience when using npm-scripts
.
Here is the options(you can get the list by npx create-config --help
):
-o, --output <string> output directory where to put the generated file (default: "dist")
-f, --config-file-name <string> filename of the generated file (default: "_app.config.js")
-n, --config-name <string> the key name of global(window) (default: "APP_CONFIG")
-x, --prefix <string> only keys start with the prefix would be preserved (default: "config_")
-h, --help display help for command
Without dotenv
It's recommended to use dotenv
, which is used widely in modern front-end dev environments.
We automatically read configs from your .env.production | .env
file.
Besides, there is one more way without dotenv
. A appConfig.json
at root is also available.
| - appConfig.json
| - .env.production
| - .env