npx @talend/scripts-cmf
You can also launch the command below to build your webapp. you can add it into prepublish npm script.
yarn cmf-settings
This script merge a set of settings sources into a destination file.
Each sources is a path to eiter a folder or a file.
The destination is minified.
It require a cmf.json file with this format in your webapp's project root:
After the install of @talend/react-cmf, the script cmf-settings is installed on your node_modules/.bin folder.
Options for this script:
- -d to use sources-dev instead of sources
- -q to run the script in quiet mode
- -r to run the json search recursive
Create in your project folder a file cmf.json at the same level as the package.json.
Here is an example of configuration
{
"settings": {
"sources": [
"src/settings",
"node_modules/@talend/dataset/lib/settings",
"node_modules/@talend/myOtherDep/lib/file.json"
],
"sources-dev": [
"src/settings",
"../../dataset/webapp/src/settings",
"../../myOtherDep/lib/file.json"
],
"destination": "src/assets/cmf-settings.json"
}
}| property | description | type |
|---|---|---|
| sources | defines all path to merge | array |
| sources-dev | defines all path to merge with -d option | array |
| destination | destination for the merged settings | string |
The configuration support translations using i18next. It will extract all object with a i18n attribute
{
"settings": {
//...usual +
"i18n": {
"languages": ["en", "fr", "ja"],
"namespace-paths": [
{ "name": "app-cmf", "path": "src/assets/locales/{{namespace}}/{{locale}}.json" },
{
"name": "package1-cmf",
"path": "node_modules/package1/locales/{{namespace}}/{{locale}}.json"
},
{
"name": "package2-cmf",
"path": "node_modules/package2/locales/{{namespace}}/{{locale}}.json"
}
],
"extract-namespaces": ["app-cmf"],
"extract-from": ["src/settings"],
"extract-sort": true
},
"destination": "src/assets/settings.json"
}
}The i18n settings are merged to the destination property with the language. e.g. For the destination "src/assets/settings.json", each translated settings will be created like "src/assets/settings.{{language}}.json"
| property | description | type |
|---|---|---|
| languages | languages handle by your application | array |
| namespace-paths | path of the namespace used to build the i18next ressource | array |
| extract-namespaces | set the namespace to extract the keys/values | array |
| extract-from | indicate the folder to extract the keys/values | array |
| extract-sort | indicate if the keys are sorted (default: true) | boolean |
Namespace definition
| property | description | type |
|---|---|---|
| name | name of the namepace | name |
| path | pattern to find the locale | string |
{
label: {
i18n: {
key: 'myNamespace:KEY1',
options: {
defaultValue: 'foo',
},
},
},
message: {
i18n: {
key: 'otherNamespace:KEY2',
options: {
defaultValue: 'bar',
},
},
}
}
Warning : if the namespace is not define in the settings files or if it is not define in the config file the key will not be extracted
If you need to use multiple settings in one project you can do so with an environment variable CMF_ENV.
$ cross-env CMF_ENV=withoutMyOtherDep cmf-settings
{
// will not be used
"settings": {
"sources": [
"src/settings",
"node_modules/@talend/dataset/lib/settings",
"node_modules/@talend/myOtherDep/lib/file.json"
],
"sources-dev": [
"src/settings",
"../../dataset/webapp/src/settings",
"../../myOtherDep/lib/file.json"
],
"destination": "src/assets/cmf-settings.json"
},
"withoutMyOtherDep": {
// will be used
"settings": {
"sources": ["src/settings", "node_modules/@talend/dataset/lib/settings"],
"sources-dev": ["src/settings", "../../dataset/webapp/src/settings"],
"destination": "src/assets/cmf-settings.json"
}
}
}