config
This is a built-in CLI process used to retrieve final config objects in various formats OR initialize a single/environment configuration.
Alias:
c
Initialize
mhy is able to generate your config files for your environment. Use it to initialize your environment in your IDE/Editor.
mhy configBy default mhy won't overwrite your existing configuration files, it gives you a warning instead. In case you want to overwrite anyway, use the -o --overwrite flag.
mhy config -oUse the -i --init flag to initialize a single configuration file only.
mhy config webpack -i
# in case you also wan't to overwrite
mhy config webpack -ioGet
In certain situations you might want to initialize only a certain configuration or just want to check the final object mhy will use.
Log out a single config object:
mhy config webpackYou may use the -f --format flag to change the output format:
mhy config webpack -f jsonYou might want to write the contents into a file, you just need to use the > operator which works both on Windows and Linux:
mhy config webpack --format=mjs > webpack.config.mjsAvailable formats:
jsplain JavaScript objectmodule.exports = module.exports.default = {}mjsplain JavaScript objectexport default {}jsonplain JSON objectrawtry to print out as is
Set
Setting configuration values can be done in multiple ways. Before showing those, let's get famimilar with the configuration loading flow and some definitions first.
Entities
rootentities are being loaded alwaysenventities are being loaded if the current environment matches
Directory structure
This is an example of webpack's structure:
webpack
|- root
|- development
|- production
|- index.jsmhy will recursively load all configuration values from the directory structure recursively.
File names are becoming keys in the final object and folders are becoming arrays.
Example
webpack
|- root
   |- plugins
      |- swc.js // returns {foo: 'bar'}
   |- resolve.js // returns 'Resolve value'
|- development
|- productionFrom the directory structure above you will end up having the following object:
{
    plugins: [{ foo: 'bar' }],
    resolve: 'Resolve value'
}Flow
Load
rootfrommhyLoad
rootfromlocalLoad
rootfrompackage.jsonLoad
envfrommhyLoad
envfromlocalLoad
envfrompackage.json
Overriding
Using package.json (recommended)
mhy's practice to to keep every configuration in the package.json of the project. You can manipulate almost every aspect of a configariation object through JSON, even removals, appends, replaces, pushes or even searching and running JavaScript code.
All mhy related values are being stored under the key "mhy" in your package.json. The structure is the same. By default your object basically are being deep merged.
mhy is coming with support for json-merger which enables manipulation of JSON data easily without using JavaScript.
Let's assume the same webpack directory structure as above and the follwing in out package.json file:
{
    "mhy": {
        "webpack": {
            "development": {
               "resolve": "new resolve value",
               "plugins": [{
                  "$append": "kex"
               }]
            }
        }
    }
}The result for webpack will be:
{
   resolve: "new resolve value",
   plugins: [{ foo: 'bar' }, 'kex']
}Using files
This method is for more advanced cases or those who prefer to manage their configs in files.
mhy will search a .mhy directory in your project root. There you need to have a config directory with the same environment base as in the previous examples:
.mhy
  |- configs
    |- webpack
      |- development
        |- resolve.jsIn your files you need to default export a function that is returning the value. In the first parameter you'll also get the current value of the key if there's any.
module.exports = current => {
    current.extensions.push('svg')
    return current
}Local processes/commands
Using this method you can have your own, local processes/commands as well. More info on this is about to come, stay tuned!
Last updated
Was this helpful?