@zohodesk/client_build_tool 0.0.11-exp.15.1 → 0.0.11-exp.15.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -204
- package/docs/I18N_NUMERIC_INDEXING_PLUGIN.md +225 -0
- package/lib/schemas/defaultConfigValues.js +9 -12
- package/lib/schemas/defaultConfigValuesOnly.js +1 -18
- package/lib/shared/bundler/webpack/custom_plugins/I18nNumericIndexPlugin/I18nGroupRuntimeModule.js +124 -0
- package/lib/shared/bundler/webpack/custom_plugins/I18nNumericIndexPlugin/I18nNumericIndexPlugin.js +210 -143
- package/lib/shared/bundler/webpack/custom_plugins/I18nNumericIndexPlugin/utils/i18nDataLoader.js +47 -12
- package/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/utils/propertiesUtils.js +19 -1
- package/lib/shared/bundler/webpack/jsLoaders.js +9 -4
- package/lib/shared/bundler/webpack/loaderConfigs/i18nIdReplaceLoaderConfig.js +12 -3
- package/lib/shared/bundler/webpack/loaders/i18nIdReplaceLoader.js +28 -14
- package/lib/shared/bundler/webpack/pluginConfigs/configI18nIndexingPlugin.js +42 -0
- package/lib/shared/bundler/webpack/pluginConfigs/configI18nNumericHtmlInjector.js +92 -0
- package/lib/shared/bundler/webpack/plugins.js +6 -2
- package/npm-shrinkwrap.json +2 -2
- package/package.json +1 -1
- package/README_backup.md +0 -202
- package/init/README.md +0 -170
- package/lib/shared/bundler/webpack/custom_plugins/I18nNumericIndexPlugin/I18nNumericIndexHtmlInjectorPlugin.js +0 -49
- package/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/utils/collectAstKeys.js +0 -96
- package/lib/shared/bundler/webpack/pluginConfigs/configI18nNumericIndexPlugin.js +0 -84
- package/lib/shared/bundler/webpack/utils/propertiesParser.js +0 -81
|
@@ -20,7 +20,7 @@ module.exports = function i18nIdReplaceLoader(source, map) {
|
|
|
20
20
|
const resourcePath = this.resourcePath;
|
|
21
21
|
this.cacheable && this.cacheable();
|
|
22
22
|
const options = getOptions(this) || {};
|
|
23
|
-
const callback = this.async();
|
|
23
|
+
const callback = this.async(); // Skip files in excluded paths
|
|
24
24
|
|
|
25
25
|
if (options.excludePaths) {
|
|
26
26
|
const shouldExclude = options.excludePaths.some(excludePath => resourcePath.includes(excludePath));
|
|
@@ -28,7 +28,8 @@ module.exports = function i18nIdReplaceLoader(source, map) {
|
|
|
28
28
|
if (shouldExclude) {
|
|
29
29
|
return callback(null, source, map);
|
|
30
30
|
}
|
|
31
|
-
}
|
|
31
|
+
} // Only process files in included paths if specified
|
|
32
|
+
|
|
32
33
|
|
|
33
34
|
if (options.includePaths && options.includePaths.length > 0) {
|
|
34
35
|
const shouldInclude = options.includePaths.some(includePath => resourcePath.includes(includePath));
|
|
@@ -36,11 +37,13 @@ module.exports = function i18nIdReplaceLoader(source, map) {
|
|
|
36
37
|
if (!shouldInclude) {
|
|
37
38
|
return callback(null, source, map);
|
|
38
39
|
}
|
|
39
|
-
}
|
|
40
|
+
} // Validate i18n data exists
|
|
41
|
+
|
|
40
42
|
|
|
41
43
|
if (!options.allI18nData || Object.keys(options.allI18nData).length === 0) {
|
|
42
44
|
return callback(new Error(`i18nIdReplaceLoader: 'allI18nData' option is missing or empty`));
|
|
43
|
-
}
|
|
45
|
+
} // Load numeric ID mapping
|
|
46
|
+
|
|
44
47
|
|
|
45
48
|
let numericIdMap = null;
|
|
46
49
|
|
|
@@ -48,14 +51,22 @@ module.exports = function i18nIdReplaceLoader(source, map) {
|
|
|
48
51
|
try {
|
|
49
52
|
if (fs.existsSync(options.numericMapPath)) {
|
|
50
53
|
const fileContent = fs.readFileSync(options.numericMapPath, 'utf-8');
|
|
51
|
-
const parsedData = JSON.parse(fileContent);
|
|
52
|
-
|
|
53
|
-
if (parsedData
|
|
54
|
-
|
|
54
|
+
const parsedData = JSON.parse(fileContent); // Handle both wrapped and flat formats
|
|
55
|
+
|
|
56
|
+
if (parsedData) {
|
|
57
|
+
if (parsedData.originalKeyToNumericId) {
|
|
58
|
+
// New format with wrapper
|
|
59
|
+
numericIdMap = parsedData.originalKeyToNumericId;
|
|
60
|
+
} else if (typeof parsedData === 'object') {
|
|
61
|
+
// Flat format - use directly
|
|
62
|
+
numericIdMap = parsedData;
|
|
63
|
+
}
|
|
55
64
|
}
|
|
56
65
|
}
|
|
57
|
-
} catch (err) {
|
|
58
|
-
|
|
66
|
+
} catch (err) {// Silently continue without numeric mapping
|
|
67
|
+
}
|
|
68
|
+
} // If no numeric map available, return source as-is
|
|
69
|
+
|
|
59
70
|
|
|
60
71
|
if (!numericIdMap) {
|
|
61
72
|
return callback(null, source, map);
|
|
@@ -64,21 +75,24 @@ module.exports = function i18nIdReplaceLoader(source, map) {
|
|
|
64
75
|
const isDevMode = options.devMode || process.env.NODE_ENV === 'development';
|
|
65
76
|
|
|
66
77
|
try {
|
|
78
|
+
// Parse the JavaScript/TypeScript source code
|
|
67
79
|
const ast = parser.parse(source, {
|
|
68
80
|
sourceType: 'module',
|
|
69
81
|
plugins: ['jsx', 'typescript', 'classProperties', 'optionalChaining', 'nullishCoalescingOperator'],
|
|
70
82
|
sourceFilename: resourcePath
|
|
71
83
|
});
|
|
72
|
-
let hasTransformations = false;
|
|
84
|
+
let hasTransformations = false; // Traverse AST and replace i18n keys with numeric IDs
|
|
85
|
+
|
|
73
86
|
traverse(ast, {
|
|
74
87
|
StringLiteral(path) {
|
|
75
88
|
const {
|
|
76
89
|
node
|
|
77
|
-
} = path;
|
|
90
|
+
} = path; // Check if this string is an i18n key
|
|
78
91
|
|
|
79
92
|
if (!options.allI18nData.hasOwnProperty(node.value)) {
|
|
80
93
|
return;
|
|
81
|
-
}
|
|
94
|
+
} // Replace with numeric ID if available
|
|
95
|
+
|
|
82
96
|
|
|
83
97
|
if (numericIdMap.hasOwnProperty(node.value)) {
|
|
84
98
|
const numericId = String(numericIdMap[node.value]);
|
|
@@ -87,7 +101,7 @@ module.exports = function i18nIdReplaceLoader(source, map) {
|
|
|
87
101
|
}
|
|
88
102
|
}
|
|
89
103
|
|
|
90
|
-
});
|
|
104
|
+
}); // Generate code if transformations were made
|
|
91
105
|
|
|
92
106
|
if (hasTransformations) {
|
|
93
107
|
const output = generator(ast, {
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = configI18nIndexingPlugin;
|
|
7
|
+
|
|
8
|
+
var _I18nNumericIndexPlugin = _interopRequireDefault(require("../custom_plugins/I18nNumericIndexPlugin/I18nNumericIndexPlugin"));
|
|
9
|
+
|
|
10
|
+
var _resourceBasedPublicPath = require("../common/resourceBasedPublicPath");
|
|
11
|
+
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
|
|
14
|
+
function configI18nIndexingPlugin(config) {
|
|
15
|
+
const {
|
|
16
|
+
i18nIndexing,
|
|
17
|
+
cdnMapping
|
|
18
|
+
} = config;
|
|
19
|
+
|
|
20
|
+
if (!i18nIndexing || !i18nIndexing.enable) {
|
|
21
|
+
return null;
|
|
22
|
+
} // Get the public path for i18n resources
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
const i18nPublicPath = (0, _resourceBasedPublicPath.resourceBasedPublicPath)('i18n', config); // Get the CDN template for i18n resources if CDN is enabled
|
|
26
|
+
|
|
27
|
+
const i18nCdnTemplate = cdnMapping && cdnMapping.isCdnEnabled ? cdnMapping.i18nTemplate || cdnMapping.jsTemplate : '';
|
|
28
|
+
const options = {
|
|
29
|
+
jsResourcePath: i18nIndexing.jsResourcePath,
|
|
30
|
+
propertiesFolderPath: i18nIndexing.propertiesFolderPath,
|
|
31
|
+
numericMapPath: i18nIndexing.numericMapPath,
|
|
32
|
+
numericFilenameTemplate: i18nIndexing.numericFilenameTemplate || 'i18n-chunk/[locale]/numeric.i18n.js',
|
|
33
|
+
dynamicFilenameTemplate: i18nIndexing.dynamicFilenameTemplate || 'i18n-chunk/[locale]/dynamic.i18n.js',
|
|
34
|
+
jsonpFunc: i18nIndexing.jsonpFunc || 'window.loadI18nChunk',
|
|
35
|
+
htmlTemplateLabel: i18nIndexing.htmlTemplateLabel || '{{--user-locale}}',
|
|
36
|
+
localeVarName: i18nIndexing.localeVarName || 'window.userLangCode',
|
|
37
|
+
customGroups: i18nIndexing.customGroups || {},
|
|
38
|
+
publicPath: i18nPublicPath || '',
|
|
39
|
+
i18nCdnTemplate
|
|
40
|
+
};
|
|
41
|
+
return new _I18nNumericIndexPlugin.default(options);
|
|
42
|
+
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = configI18nNumericHtmlInjector;
|
|
7
|
+
|
|
8
|
+
var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
|
|
12
|
+
const pluginName = 'I18nNumericHtmlInjectorPlugin';
|
|
13
|
+
|
|
14
|
+
class I18nNumericHtmlInjectorPlugin {
|
|
15
|
+
constructor(options) {
|
|
16
|
+
this.options = options;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
apply(compiler) {
|
|
20
|
+
compiler.hooks.thisCompilation.tap(pluginName, compilation => {
|
|
21
|
+
// Hook into HtmlWebpackPlugin to inject i18n script tags
|
|
22
|
+
_htmlWebpackPlugin.default.getHooks(compilation).beforeAssetTagGeneration.tap(pluginName, hookData => {
|
|
23
|
+
const {
|
|
24
|
+
assets
|
|
25
|
+
} = hookData;
|
|
26
|
+
const {
|
|
27
|
+
numericFilenameTemplate,
|
|
28
|
+
dynamicFilenameTemplate,
|
|
29
|
+
htmlTemplateLabel,
|
|
30
|
+
i18nCdnTemplate,
|
|
31
|
+
customGroups
|
|
32
|
+
} = this.options;
|
|
33
|
+
const newI18nAssets = []; // Add numeric i18n chunk
|
|
34
|
+
|
|
35
|
+
if (numericFilenameTemplate) {
|
|
36
|
+
const numericFilename = numericFilenameTemplate.replace(/\[locale\]/g, htmlTemplateLabel).replace(/%5Blocale%5D/g, htmlTemplateLabel); // Don't add CDN template - HtmlWebpackPlugin handles it
|
|
37
|
+
|
|
38
|
+
newI18nAssets.push(numericFilename);
|
|
39
|
+
} // Add dynamic i18n chunk
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
if (dynamicFilenameTemplate) {
|
|
43
|
+
const dynamicFilename = dynamicFilenameTemplate.replace(/\[locale\]/g, htmlTemplateLabel).replace(/%5Blocale%5D/g, htmlTemplateLabel); // Don't add CDN template - HtmlWebpackPlugin handles it
|
|
44
|
+
|
|
45
|
+
newI18nAssets.push(dynamicFilename);
|
|
46
|
+
} // Add custom group chunks if they should be in initial HTML
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
if (customGroups) {
|
|
50
|
+
Object.entries(customGroups).forEach(([groupName, groupConfig]) => {
|
|
51
|
+
// Only add to initial HTML if preload is true
|
|
52
|
+
if (groupConfig.preload && groupConfig.filenameTemplate) {
|
|
53
|
+
const groupFilename = groupConfig.filenameTemplate.replace(/\[locale\]/g, htmlTemplateLabel).replace(/%5Blocale%5D/g, htmlTemplateLabel); // Don't add CDN template - HtmlWebpackPlugin handles it
|
|
54
|
+
|
|
55
|
+
newI18nAssets.push(groupFilename);
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
} // Prepend i18n assets to ensure they load before main bundle
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
if (newI18nAssets.length > 0) {
|
|
62
|
+
assets.js = [...newI18nAssets, ...assets.js];
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
return hookData;
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
function configI18nNumericHtmlInjector(config) {
|
|
73
|
+
const {
|
|
74
|
+
i18nIndexing,
|
|
75
|
+
cdnMapping
|
|
76
|
+
} = config; // Only create this plugin if i18nIndexing is enabled
|
|
77
|
+
|
|
78
|
+
if (!i18nIndexing || !i18nIndexing.enable) {
|
|
79
|
+
return null;
|
|
80
|
+
} // Get the CDN template for i18n resources if CDN is enabled
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
const i18nCdnTemplate = cdnMapping && cdnMapping.isCdnEnabled ? cdnMapping.i18nTemplate || cdnMapping.jsTemplate : '';
|
|
84
|
+
const options = {
|
|
85
|
+
numericFilenameTemplate: i18nIndexing.numericFilenameTemplate || 'i18n-chunk/[locale]/numeric.i18n.js',
|
|
86
|
+
dynamicFilenameTemplate: i18nIndexing.dynamicFilenameTemplate || 'i18n-chunk/[locale]/dynamic.i18n.js',
|
|
87
|
+
htmlTemplateLabel: i18nIndexing.htmlTemplateLabel || '{{--user-locale}}',
|
|
88
|
+
customGroups: i18nIndexing.customGroups || {},
|
|
89
|
+
i18nCdnTemplate
|
|
90
|
+
};
|
|
91
|
+
return new I18nNumericHtmlInjectorPlugin(options);
|
|
92
|
+
}
|
|
@@ -11,6 +11,10 @@ var _configEnvVariables = require("./pluginConfigs/configEnvVariables");
|
|
|
11
11
|
|
|
12
12
|
var _configI18nSplitPlugin = require("./pluginConfigs/configI18nSplitPlugin");
|
|
13
13
|
|
|
14
|
+
var _configI18nIndexingPlugin = _interopRequireDefault(require("./pluginConfigs/configI18nIndexingPlugin"));
|
|
15
|
+
|
|
16
|
+
var _configI18nNumericHtmlInjector = _interopRequireDefault(require("./pluginConfigs/configI18nNumericHtmlInjector"));
|
|
17
|
+
|
|
14
18
|
var _configMiniCSSExtractPlugin = require("./pluginConfigs/configMiniCSSExtractPlugin");
|
|
15
19
|
|
|
16
20
|
var _configRtlCssPlugin = require("./pluginConfigs/configRtlCssPlugin");
|
|
@@ -49,12 +53,12 @@ var _configRuntimeResourceCleanup = require("./pluginConfigs/configRuntimeResour
|
|
|
49
53
|
|
|
50
54
|
var _configCustomScriptLoadingStrategyPlugin = require("./pluginConfigs/configCustomScriptLoadingStrategyPlugin");
|
|
51
55
|
|
|
52
|
-
|
|
56
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
53
57
|
|
|
54
58
|
// import { IgnorePlugin } from 'webpack';
|
|
55
59
|
function plugins(options) {
|
|
56
60
|
const {
|
|
57
61
|
webpackPlugins
|
|
58
62
|
} = options;
|
|
59
|
-
return [(0, _configEnvVariables.configEnvVariables)(options), (0, _configCustomAttributesPlugin.configCustomAttributesPlugin)(options), (0, _configTPHashMappingPlugin.configTPHashMappingPlugin)(options), (0, _configCopyPublicFolders.configCopyPublicFolders)(options), (0, _configIgnorePlugin.configIgnorePlugin)(options), (0, _configMiniCSSExtractPlugin.configMiniCSSExtractPlugin)(options), (0, _configSelectorWeightPlugin.configSelectorWeightPlugin)(options), (0, _configVariableConversionPlugin.configVariableConversionPlugin)(options), (0, _configI18nSplitPlugin.configI18nSplitPlugin)(options), (0, _configRtlCssPlugin.configRtlCssPlugin)(options), (0, _configHtmlWebpackPlugin.configHtmlWebpackPlugin)(options),
|
|
63
|
+
return [(0, _configEnvVariables.configEnvVariables)(options), (0, _configCustomAttributesPlugin.configCustomAttributesPlugin)(options), (0, _configTPHashMappingPlugin.configTPHashMappingPlugin)(options), (0, _configCopyPublicFolders.configCopyPublicFolders)(options), (0, _configIgnorePlugin.configIgnorePlugin)(options), (0, _configMiniCSSExtractPlugin.configMiniCSSExtractPlugin)(options), (0, _configSelectorWeightPlugin.configSelectorWeightPlugin)(options), (0, _configVariableConversionPlugin.configVariableConversionPlugin)(options), (0, _configI18nSplitPlugin.configI18nSplitPlugin)(options), (0, _configI18nIndexingPlugin.default)(options), (0, _configRtlCssPlugin.configRtlCssPlugin)(options), (0, _configHtmlWebpackPlugin.configHtmlWebpackPlugin)(options), (0, _configI18nNumericHtmlInjector.default)(options), (0, _configCustomScriptLoadingStrategyPlugin.configCustomScriptLoadingStrategyPlugin)(options), (0, _configCdnChangePlugin.configCdnChangePlugin)(options), (0, _configServiceWorkerPlugin.configServiceWorkerPlugin)(options), (0, _configEFCTemplatePlugin.configEFCTemplatePlugin)(options), (0, _configResourceHintsPlugin.configResourceHintsPlugin)(options), (0, _configBundleAnalyzer.configBundleAnalyzer)(options), (0, _configManifestJsonPlugin.configManifestJsonPlugin)(options), (0, _configSourceMapPlugin.configSourceMapPlugin)(options), (0, _configProgressPlugin.configProgressPlugin)(options), (0, _configBundleIntegrityReport.configBundleIntegrityReport)(options), (0, _configRuntimeResourceCleanup.configRuntimeResourceCleanup)(options), ...webpackPlugins].filter(Boolean);
|
|
60
64
|
}
|
package/npm-shrinkwrap.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zohodesk/client_build_tool",
|
|
3
|
-
"version": "0.0.11
|
|
3
|
+
"version": "0.0.11",
|
|
4
4
|
"lockfileVersion": 2,
|
|
5
5
|
"requires": true,
|
|
6
6
|
"packages": {
|
|
7
7
|
"": {
|
|
8
8
|
"name": "@zohodesk/client_build_tool",
|
|
9
|
-
"version": "0.0.11
|
|
9
|
+
"version": "0.0.11",
|
|
10
10
|
"license": "ISC",
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@babel/cli": "7.17.10",
|
package/package.json
CHANGED
package/README_backup.md
DELETED
|
@@ -1,202 +0,0 @@
|
|
|
1
|
-
# Client Build Tool
|
|
2
|
-
|
|
3
|
-
This is a build tool for react based web applications.
|
|
4
|
-
|
|
5
|
-
Supported and Tested Environment
|
|
6
|
-
|
|
7
|
-
| Name | Version |
|
|
8
|
-
| :--: | :------: |
|
|
9
|
-
| node | v18.11.0 |
|
|
10
|
-
| npm | 8.19.2 |
|
|
11
|
-
|
|
12
|
-
OS : Mac , ubuntu
|
|
13
|
-
|
|
14
|
-
# client_build_tool
|
|
15
|
-
|
|
16
|
-
A CLI tool for build modern web application and libraries
|
|
17
|
-
|
|
18
|
-
# Installation
|
|
19
|
-
|
|
20
|
-
Below Steps:-
|
|
21
|
-
|
|
22
|
-
> `npm i -g @zohodesk/client_build_tool`
|
|
23
|
-
|
|
24
|
-
# Usage
|
|
25
|
-
|
|
26
|
-
## Step 1
|
|
27
|
-
|
|
28
|
-
> `cbt template app <your-project-folder> && cd <your-project-folder>`
|
|
29
|
-
|
|
30
|
-
## Step 2
|
|
31
|
-
|
|
32
|
-
Now to run app
|
|
33
|
-
|
|
34
|
-
> `npm run start`
|
|
35
|
-
|
|
36
|
-
---
|
|
37
|
-
|
|
38
|
-
Happy Code :>) 🤟
|
|
39
|
-
|
|
40
|
-
# "Client Build Tool (CBT): Streamline and Optimize Your Client-side Build Process"
|
|
41
|
-
|
|
42
|
-
## Description:
|
|
43
|
-
|
|
44
|
-
CBT is a powerful client-side build tool designed to streamline and optimize your development workflow. With CBT, you can effortlessly manage and configure your project's build process, automating tasks, and improving efficiency. It provides an intuitive interface and a comprehensive set of features to simplify the build pipeline, allowing you to focus more on coding and less on tedious configuration.
|
|
45
|
-
|
|
46
|
-
## Key Features:
|
|
47
|
-
|
|
48
|
-
- **Integrated Dev Server:** Run your application locally with a built-in development server for quick feedback and real-time updates.
|
|
49
|
-
- **Mock API Server:** Seamlessly integrate a mock API server to simulate backend interactions during development.
|
|
50
|
-
- **Intelligent CSS Processing:** Automatically process and optimize CSS files, including customizable class name generation and advanced postcss plugins.
|
|
51
|
-
- **Internationalization Support:** Easily manage internationalization (i18n) with efficient chunk splitting and language-specific resource loading.
|
|
52
|
-
- **CDN Mapping:** Effortlessly map assets to a Content Delivery Network (CDN) for faster delivery and improved performance.
|
|
53
|
-
- **Comprehensive Configuration:** Fine-tune your build process with extensive configuration options, including source maps, Babel customizations, and more.
|
|
54
|
-
- **Service Worker Integration:** Enable service worker functionality for offline support and improved caching capabilities.
|
|
55
|
-
- **Customizable Build Artifacts:** Define custom chunks, modify HTML templates, and generate a manifest.json file for better control over your build output.
|
|
56
|
-
- **User-friendly Interface:** CBT provides a user-friendly interface, making it easy to configure, customize, and monitor your build process.
|
|
57
|
-
|
|
58
|
-
With CBT, you can optimize your client-side development workflow, increase productivity, and deliver high-quality applications faster. Start using CBT today and experience the power of efficient and streamlined client-side builds.
|
|
59
|
-
|
|
60
|
-
# Commands
|
|
61
|
-
|
|
62
|
-
The following commands are available options for the `cbt` (Client Build Tool) CLI. You can execute these commands by prefixing them with `cbt`. For example, `cbt start`.
|
|
63
|
-
|
|
64
|
-
- **preProcessor:** Runs the preProcessor.js in the app to set the variables before the build or run the dev mode.
|
|
65
|
-
|
|
66
|
-
- **start**: Starts the development server with mode support. You can specify the mode as either `dev` or `prod`. This command is used for local development and testing.
|
|
67
|
-
|
|
68
|
-
- **build**: Executes the build command with mode support. You can specify the mode as either `dev` or `prod`. This command compiles and bundles your application for deployment.
|
|
69
|
-
|
|
70
|
-
- **build:lib**: Transpile the `src` folder to the `lib` folder, generating CommonJS modules. This command is specifically designed for building libraries that require CommonJS module format.
|
|
71
|
-
|
|
72
|
-
- **build:es**: Transpile the `src` folder to the `es` folder, generating modules using import statements. This command is useful for building libraries that use ECMAScript module syntax.
|
|
73
|
-
|
|
74
|
-
- **version**: Prints the version of the CBT CLI tool.
|
|
75
|
-
|
|
76
|
-
- **template**: Creates an initial template or skeleton for your project. You can specify the option as `app`. This command sets up a basic project structure and configuration files to get you started quickly.
|
|
77
|
-
|
|
78
|
-
- **mock:server**: Starts an external mock API server. This command enables you to run a separate server specifically for mocking API responses during development and testing.
|
|
79
|
-
|
|
80
|
-
> Note: Make sure to replace `start` in the examples above with the actual command or script that you use to run the Client Build Tool CLI.
|
|
81
|
-
|
|
82
|
-
These commands provide flexibility and control over your client-side build process, allowing you to start the development server, build your application, transpile libraries, create templates, run a mock API server, and more.
|
|
83
|
-
|
|
84
|
-
For more [Details](ConfigurationDocumentation.md)
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
version details :-
|
|
88
|
-
|
|
89
|
-
# 0.0.8
|
|
90
|
-
|
|
91
|
-
- Main version
|
|
92
|
-
|
|
93
|
-
# 0.0.9
|
|
94
|
-
|
|
95
|
-
fixes :-
|
|
96
|
-
|
|
97
|
-
- service worker wrong i18n entry fixed
|
|
98
|
-
|
|
99
|
-
- preload plc undefined url fixed
|
|
100
|
-
|
|
101
|
-
# Changelog and Release Notes
|
|
102
|
-
|
|
103
|
-
- remove babel-plugin-module-resolver dependencies
|
|
104
|
-
|
|
105
|
-
**Adjustments:-**
|
|
106
|
-
- Public Folder configuration is separated for development and production
|
|
107
|
-
|
|
108
|
-
**Bug Fix:-**
|
|
109
|
-
- Fixed the issue where the build log was not visible when `stats (bundle integrity)` was enabled. The problem was resolved by adding an error check in the `bundleIntegrity plugin`.
|
|
110
|
-
- Removed the babel-plugin-module-resolver dependency to resolve the alias resolution issue in the application.
|
|
111
|
-
- Fixed the issue where a space in the variable name causes it to return an undefined value.
|
|
112
|
-
- Fixed the URL path generation issue that occurred while using context in the development setup.
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
# v0.0.11
|
|
117
|
-
|
|
118
|
-
# v0.0.10 (12-05-2025)
|
|
119
|
-
**Feature:-**
|
|
120
|
-
- `alias` support for `build:es` and `build:lib`
|
|
121
|
-
- Add babel-plugin-module-resolver dependencies
|
|
122
|
-
- Modify getBabelPlugin to include module resolver with aliases
|
|
123
|
-
|
|
124
|
-
**Bug Fix:-**
|
|
125
|
-
- Enhance runBabelForTSFile to handle both .tsx and .ts file extensions
|
|
126
|
-
- Update mockApiHandler to ensure mock function is called correctly
|
|
127
|
-
|
|
128
|
-
**Change:-**
|
|
129
|
-
- Refactor defaultConfigValues.js to include cli options for enableRTLSplit
|
|
130
|
-
|
|
131
|
-
## v0.0.9
|
|
132
|
-
|
|
133
|
-
**Feature:-**
|
|
134
|
-
- externals was added to Prevent bundling of certain imported packages and retrieve these external dependencies at runtime.
|
|
135
|
-
- to use externals, we use the following pattern in `app > externals` :
|
|
136
|
-
|
|
137
|
-
For example
|
|
138
|
-
```
|
|
139
|
-
externals: {
|
|
140
|
-
<key> : <value>
|
|
141
|
-
}
|
|
142
|
-
```
|
|
143
|
-
|
|
144
|
-
## v0.0.6 (4-09-2023)
|
|
145
|
-
|
|
146
|
-
**Feature:-**
|
|
147
|
-
- Generating bundle integrity report json file for the build assets only in production mode. To use this feature we need to add `stats > enable` or cli flags `enable_stats`.
|
|
148
|
-
- Added Resource Cleanup plugin to cleanup resource retained by build tool. this plugin is controlled by efc flag resourcecleanup flag.
|
|
149
|
-
- added support for using regex expression to get group of chunks chunkId via Resource Hint plugin prefetch/preload hook.
|
|
150
|
-
only will be activate when `resourceHints` => `allowPrefetchingMultipleChunks` as `true`
|
|
151
|
-
- added support for glob pattern for custom chunks split logic.
|
|
152
|
-
- added options to split chunks base config in the key `app` => `customChunksBaseConfig` as object
|
|
153
|
-
|
|
154
|
-
**Change:-**
|
|
155
|
-
- i18n name not generated issue fix.
|
|
156
|
-
- public path not correctly set issue fix.
|
|
157
|
-
- changing plugin hook stages in i18nRuntimePlugin and sourceMapPlugin
|
|
158
|
-
## v0.0.5 (6-08-2023)
|
|
159
|
-
|
|
160
|
-
**Changes:--**
|
|
161
|
-
- Typo fix in i18nRuntimeDealerPlugin.js
|
|
162
|
-
- fixing some bugs in resolvers.js file
|
|
163
|
-
|
|
164
|
-
## v0.0.3 (1-08-2023)
|
|
165
|
-
|
|
166
|
-
**Changes:--**
|
|
167
|
-
- `devtool` default value changed from `hidden-cheap-source-map` to `source-map`
|
|
168
|
-
- unwanted files deleted from build
|
|
169
|
-
|
|
170
|
-
**Issue Fix:--**
|
|
171
|
-
- The issue with the source map not being created in the build has been fixed."
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
## v0.0.2 (28-04-2023)
|
|
175
|
-
|
|
176
|
-
**Features:-**
|
|
177
|
-
|
|
178
|
-
- `devModeContentHashAllowedTypes` support added for some project there will be a need for hash even though they run dev mode. for details [details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/3.0.0/packages/client_build_tool/ConfigurationDocumentation.md#devModeContentHashAllowedTypes)
|
|
179
|
-
- `devLikeHash` support for disable content hash for file names in production mode. for details [details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/3.0.0/packages/client_build_tool/ConfigurationDocumentation.md#devLikeHash)
|
|
180
|
-
- `disableReactDevWarning` disable react dev warning such as prop-type warnings will be removed in dev mode build or server. for details [details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/3.0.0/packages/client_build_tool/ConfigurationDocumentation.md#disableReactDevWarning) can be enabled via `--disable_react_dev_warning` too.
|
|
181
|
-
- `statsLogConfig` support to customize default webpack log after build finished. for details [details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/3.0.0/packages/client_build_tool/ConfigurationDocumentation.md#statsLogConfig) can be enabled via `--disable_react_dev_warning` too.
|
|
182
|
-
- `enableChunkHash` renamed as `enableFileNameHashing`
|
|
183
|
-
|
|
184
|
-
- `pre_processor` command to run the preprocessor.js file.preProcessor runs in build, start, buildEs, buildLib commands bu default. and we have watch mode support as well with the option (`-w`)
|
|
185
|
-
- `createSeparateSmap` flag `source_map_enable` renamed as `enable_smap`
|
|
186
|
-
- `removeAttribute` option changes as `babelCustomizations.removeAttribute`
|
|
187
|
-
- `removePropTypes` support for remove the prop types package in the output build.
|
|
188
|
-
- `devConsoleExclude` support for remove the _console statements_ such as _console.log_, _console.warn_ in the output build.
|
|
189
|
-
- `manifestJson` default value set as false.
|
|
190
|
-
- `customAttributes` support for add attributes to html, link , script tag in the output build.
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
## v0.0.1 (18-04-2023)
|
|
194
|
-
|
|
195
|
-
First Release
|
|
196
|
-
**Features:-**
|
|
197
|
-
|
|
198
|
-
- 'start' command to run react app
|
|
199
|
-
- 'build' command to create build for react app
|
|
200
|
-
- 'build:lib' command to create lib for react library
|
|
201
|
-
- 'build:es' command to create es for react library
|
|
202
|
-
- 'templates' command to create es for react library
|
package/init/README.md
DELETED
|
@@ -1,170 +0,0 @@
|
|
|
1
|
-
# Client Build Tool Init Guide
|
|
2
|
-
|
|
3
|
-
This folder provides a quick-start for integrating `@zohodesk/client_build_tool` (aka `cbt`) into an app. It covers installation, minimal config, and common feature toggles.
|
|
4
|
-
|
|
5
|
-
## Install
|
|
6
|
-
|
|
7
|
-
- As a dev dependency (recommended):
|
|
8
|
-
- npm: `npm i -D @zohodesk/client_build_tool`
|
|
9
|
-
- yarn: `yarn add -D @zohodesk/client_build_tool`
|
|
10
|
-
- Or use via npx: `npx cbt --help`
|
|
11
|
-
|
|
12
|
-
Add convenient scripts to your app’s `package.json`:
|
|
13
|
-
|
|
14
|
-
```
|
|
15
|
-
{
|
|
16
|
-
"scripts": {
|
|
17
|
-
"dev": "cbt start --context=app",
|
|
18
|
-
"build:es": "cbt build:es src es",
|
|
19
|
-
"build:lib": "cbt build:lib src lib",
|
|
20
|
-
"mock": "cbt mock:server --mock_port=3001",
|
|
21
|
-
"pre": "cbt pre:process"
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
## Minimal Config (cbt.config.js)
|
|
27
|
-
|
|
28
|
-
Copy `cbt.config.example.js` to your app root as `cbt.config.js` and edit:
|
|
29
|
-
|
|
30
|
-
```
|
|
31
|
-
module.exports = {
|
|
32
|
-
config: {
|
|
33
|
-
context: 'app',
|
|
34
|
-
mode: 'dev',
|
|
35
|
-
server: {
|
|
36
|
-
port: 9090,
|
|
37
|
-
host: 'localhost',
|
|
38
|
-
httpsCerts: '@zohodesk-private/client_dev_cert',
|
|
39
|
-
disableContextURL: false
|
|
40
|
-
},
|
|
41
|
-
htmlTemplate: { templateFile: 'src/index.html', inject: true },
|
|
42
|
-
app: { entryFile: 'src/index.js' },
|
|
43
|
-
css: {
|
|
44
|
-
plugins: {
|
|
45
|
-
rtlSplit: { enableRTLSplit: false }
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
i18nChunkSplit: { chunkSplitEnable: false },
|
|
49
|
-
i18nIndexing: { enable: false },
|
|
50
|
-
preProcess: { enable: false }
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
Run dev server: `npm run dev` (or `cbt start`).
|
|
56
|
-
|
|
57
|
-
## Common Feature Recipes
|
|
58
|
-
|
|
59
|
-
- Enable i18n chunk split (per-locale chunks):
|
|
60
|
-
```
|
|
61
|
-
config: {
|
|
62
|
-
i18nChunkSplit: {
|
|
63
|
-
chunkSplitEnable: true,
|
|
64
|
-
templateLabel: '{{--user-locale}}',
|
|
65
|
-
localeVarName: 'document.documentElement.lang',
|
|
66
|
-
jsonpFunc: 'window.loadI18nChunk',
|
|
67
|
-
// optional: jsResource/propertiesFolder when using default reader
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
- Enable i18n numeric indexing (per-locale or single-file):
|
|
73
|
-
```
|
|
74
|
-
config: {
|
|
75
|
-
i18nIndexing: {
|
|
76
|
-
enable: true,
|
|
77
|
-
devMode: false,
|
|
78
|
-
jsResourcePath: './deskapp/properties/JSResources.properties',
|
|
79
|
-
propertiesFolderPath: './deskapp/properties',
|
|
80
|
-
numericMapPath: './deskapp/properties/i18n-numeric-map.json',
|
|
81
|
-
// choose one mode
|
|
82
|
-
numericFilenameTemplate: 'i18n-chunk/[locale]/numeric.i18n.js',
|
|
83
|
-
dynamicFilenameTemplate: 'i18n-chunk/[locale]/dynamic.i18n.js',
|
|
84
|
-
// or single-file mode
|
|
85
|
-
// singleFile: true,
|
|
86
|
-
// singleFileTemplate: 'i18n/[locale].js',
|
|
87
|
-
jsonpFunc: 'window.loadI18nChunk',
|
|
88
|
-
htmlTemplateLabel: '{{--user-locale}}',
|
|
89
|
-
localeVarName: 'window.userLangCode',
|
|
90
|
-
includeContentHash: false,
|
|
91
|
-
generateManifest: false
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
- Enable RTL CSS split and path templating:
|
|
97
|
-
```
|
|
98
|
-
config: {
|
|
99
|
-
css: {
|
|
100
|
-
plugins: {
|
|
101
|
-
rtlSplit: {
|
|
102
|
-
enableRTLSplit: true,
|
|
103
|
-
templateLabel: '{{--dir}}',
|
|
104
|
-
disableMinifySelector: false,
|
|
105
|
-
dirVarName: 'document.dir'
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
- EFC SDK output:
|
|
113
|
-
```
|
|
114
|
-
config: {
|
|
115
|
-
efc: {
|
|
116
|
-
hasEFC: true,
|
|
117
|
-
createSDkFile: true,
|
|
118
|
-
entryPointName: 'efc',
|
|
119
|
-
entryFile: 'src/efc.js',
|
|
120
|
-
version: 'v1',
|
|
121
|
-
templateFilePath: 'efcTemplate.js',
|
|
122
|
-
outputFile: 'efc-sdk-[version].js',
|
|
123
|
-
resourceCleanup: true
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
- Service worker:
|
|
129
|
-
```
|
|
130
|
-
config: {
|
|
131
|
-
serviceWorker: {
|
|
132
|
-
enable: true,
|
|
133
|
-
templateFilePath: 'sw.js',
|
|
134
|
-
outputFilePath: '/v1.js',
|
|
135
|
-
replaceText: '//<!--AssetsFromBuild -->'
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
- Custom PostCSS plugins (built-in + custom):
|
|
141
|
-
```
|
|
142
|
-
config: {
|
|
143
|
-
css: {
|
|
144
|
-
plugins: {
|
|
145
|
-
valueReplacer: { enable: true, patterns: ['**/*.css'], config: [
|
|
146
|
-
{ props: ['color'], values: { 'zd-': 'im-' } }
|
|
147
|
-
]},
|
|
148
|
-
selectorReplace: { enable: true, patterns: ['**/*.module.css'], before: ['.old'], after: ['.new'] },
|
|
149
|
-
hoverActive: { enable: true, patterns: ['**/*.css'], hover: '(hover: hover)', active: '(hover: none)' },
|
|
150
|
-
cssVariableReplacement: { enable: false, patterns: [], configFile: null },
|
|
151
|
-
rtl: { enable: false, patterns: [] }
|
|
152
|
-
},
|
|
153
|
-
customPlugins: [
|
|
154
|
-
// { enable: true, patterns: ['**/*.css'], plugin: '/absolute/path/to/custom-postcss-plugin.js' }
|
|
155
|
-
]
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
## Tips & Troubleshooting
|
|
161
|
-
|
|
162
|
-
- Node.js: CBT supports Node 14–18.
|
|
163
|
-
- HTTPS certs: `server.httpsCerts` can be a local or global npm package exposing `{ httpsOptions }`.
|
|
164
|
-
- Public path: Controlled via server extras; disable context prefix with `server.disableContextURL=true`.
|
|
165
|
-
- Proxies: If you have stale npm proxy settings during install: `npm config delete proxy && npm config delete https-proxy`.
|
|
166
|
-
- Verbose logs: set `VERBOSE=true`.
|
|
167
|
-
|
|
168
|
-
---
|
|
169
|
-
|
|
170
|
-
For full option reference and internal architecture, read `../docs/client_build_tool_source_doc.md`.
|