UNPKG

@zohodesk/client_build_tool

Version:

A CLI tool to build web applications and client libraries

438 lines (299 loc) 20.6 kB
# Client Build Tool This is a build tool for react based web applications. Supported and Tested Environment | Name | Version | | :--: | :------: | | node | v18.11.0 | | npm | 8.19.2 | OS : Mac , ubuntu # client_build_tool A CLI tool for build modern web application and libraries # Installation Below Steps:- > `npm i -g @zohodesk/client_build_tool` # Usage ## Step 1 > `cbt template app <your-project-folder> && cd <your-project-folder>` ## Step 2 Now to run app > `npm run start` --- Happy Code :>) 🤟 # "Client Build Tool (CBT): Streamline and Optimize Your Client-side Build Process" ## Description: 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. ## Key Features: - **Integrated Dev Server:** Run your application locally with a built-in development server for quick feedback and real-time updates. - **Mock API Server:** Seamlessly integrate a mock API server to simulate backend interactions during development. - **Intelligent CSS Processing:** Automatically process and optimize CSS files, including customizable class name generation and advanced postcss plugins. - **Internationalization Support:** Easily manage internationalization (i18n) with efficient chunk splitting and language-specific resource loading. - **CDN Mapping:** Effortlessly map assets to a Content Delivery Network (CDN) for faster delivery and improved performance. - **Comprehensive Configuration:** Fine-tune your build process with extensive configuration options, including source maps, Babel customizations, and more. - **Service Worker Integration:** Enable service worker functionality for offline support and improved caching capabilities. - **Customizable Build Artifacts:** Define custom chunks, modify HTML templates, and generate a manifest.json file for better control over your build output. - **User-friendly Interface:** CBT provides a user-friendly interface, making it easy to configure, customize, and monitor your build process. 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. # Commands 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`. - **preProcessor:** Runs the preProcessor.js in the app to set the variables before the build or run the dev mode. - **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. - **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. - **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. - **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. - **version**: Prints the version of the CBT CLI tool. - **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. - **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. > 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. 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. For more [Details](ConfigurationDocumentation.md) version details :- # 0.0.8 - Main version # 0.0.9 fixes :- - service worker wrong i18n entry fixed - preload plc undefined url fixed # Changelog and Release Notes - remove babel-plugin-module-resolver dependencies **Adjustments:-** - Public Folder configuration is separated for development and production **Bug Fix:-** - 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`. - Removed the babel-plugin-module-resolver dependency to resolve the alias resolution issue in the application. - Fixed the issue where a space in the variable name causes it to return an undefined value. - Fixed the URL path generation issue that occurred while using context in the development setup. # v0.0.11 # v0.0.10 (12-05-2025) **Feature:-** - `alias` support for `build:es` and `build:lib` - Add babel-plugin-module-resolver dependencies - Modify getBabelPlugin to include module resolver with aliases **Bug Fix:-** - Enhance runBabelForTSFile to handle both .tsx and .ts file extensions - Update mockApiHandler to ensure mock function is called correctly **Change:-** - Refactor defaultConfigValues.js to include cli options for enableRTLSplit ## v0.0.9 **Feature:-** - externals was added to Prevent bundling of certain imported packages and retrieve these external dependencies at runtime. - to use externals, we use the following pattern in `app > externals` : For example ``` externals: { <key> : <value> } ``` ## v0.0.6 (4-09-2023) **Feature:-** - 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`. - Added Resource Cleanup plugin to cleanup resource retained by build tool. this plugin is controlled by efc flag resourcecleanup flag. - added support for using regex expression to get group of chunks chunkId via Resource Hint plugin prefetch/preload hook. only will be activate when `resourceHints` => `allowPrefetchingMultipleChunks` as `true` - added support for glob pattern for custom chunks split logic. - added options to split chunks base config in the key `app` => `customChunksBaseConfig` as object **Change:-** - i18n name not generated issue fix. - public path not correctly set issue fix. - changing plugin hook stages in i18nRuntimePlugin and sourceMapPlugin ## v0.0.5 (6-08-2023) **Changes:--** - Typo fix in i18nRuntimeDealerPlugin.js - fixing some bugs in resolvers.js file ## v0.0.3 (1-08-2023) **Changes:--** - `devtool` default value changed from `hidden-cheap-source-map` to `source-map` - unwanted files deleted from build **Issue Fix:--** - The issue with the source map not being created in the build has been fixed." ## v0.0.2 (28-04-2023) **Features:-** - `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) - `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) - `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. - `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. - `enableChunkHash` renamed as `enableFileNameHashing` - `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`) - `createSeparateSmap` flag `source_map_enable` renamed as `enable_smap` - `removeAttribute` option changes as `babelCustomizations.removeAttribute` - `removePropTypes` support for remove the prop types package in the output build. - `devConsoleExclude` support for remove the _console statements_ such as _console.log_, _console.warn_ in the output build. - `manifestJson` default value set as false. - `customAttributes` support for add attributes to html, link , script tag in the output build. ## v0.0.1 (18-04-2023) First Release **Features:-** - 'start' command to run react app - 'build' command to create build for react app - 'build:lib' command to create lib for react library - 'build:es' command to create es for react library - 'templates' command to create es for react library # Changelog and Release Notes # v0.0.12 (14-08-2025) - Fixed the initial i18n loading issue caused by using the same function in both the i18nRuntimeDealer plugin and decidePublicPath # v0.0.11 (07-08-2025) (had an issue while enable i18n chunk split plugin) - remove babel-plugin-module-resolver dependencies **Adjustments:-** - Public Folder configuration is separated for development and production **Bug Fix:-** - 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`. - Removed the babel-plugin-module-resolver dependency to resolve the alias resolution issue in the application. - Fixed the issue where a space in the variable name causes it to return an undefined value. - Fixed the URL path generation issue that occurred while using context in the development setup. # v0.0.10 (12-05-2025) **Feature:-** - `alias` support for `build:es` and `build:lib` - Add babel-plugin-module-resolver dependencies - Modify getBabelPlugin to include module resolver with aliases **Bug Fix:-** - Enhance runBabelForTSFile to handle both .tsx and .ts file extensions - Update mockApiHandler to ensure mock function is called correctly **Change:-** - Refactor defaultConfigValues.js to include cli options for enableRTLSplit ## v0.0.9 **Feature:-** - externals was added to Prevent bundling of certain imported packages and retrieve these external dependencies at runtime. - to use externals, we use the following pattern in `app > externals` : For example ``` externals: { <key> : <value> } ``` ## v0.0.6 (4-09-2023) **Feature:-** - 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`. - Added Resource Cleanup plugin to cleanup resource retained by build tool. this plugin is controlled by efc flag resourcecleanup flag. - added support for using regex expression to get group of chunks chunkId via Resource Hint plugin prefetch/preload hook. only will be activate when `resourceHints` => `allowPrefetchingMultipleChunks` as `true` - added support for glob pattern for custom chunks split logic. - added options to split chunks base config in the key `app` => `customChunksBaseConfig` as object **Change:-** - i18n name not generated issue fix. - public path not correctly set issue fix. - changing plugin hook stages in i18nRuntimePlugin and sourceMapPlugin ## v0.0.5 (6-08-2023) **Changes:--** - Typo fix in i18nRuntimeDealerPlugin.js - fixing some bugs in resolvers.js file ## v0.0.3 (1-08-2023) **Changes:--** - `devtool` default value changed from `hidden-cheap-source-map` to `source-map` - unwanted files deleted from build **Issue Fix:--** - The issue with the source map not being created in the build has been fixed." ## v0.0.2 (28-04-2023) **Features:-** - `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) - `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) - `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. - `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. - `enableChunkHash` renamed as `enableFileNameHashing` - `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`) - `createSeparateSmap` flag `source_map_enable` renamed as `enable_smap` - `removeAttribute` option changes as `babelCustomizations.removeAttribute` - `removePropTypes` support for remove the prop types package in the output build. - `devConsoleExclude` support for remove the _console statements_ such as _console.log_, _console.warn_ in the output build. - `manifestJson` default value set as false. - `customAttributes` support for add attributes to html, link , script tag in the output build. ## v0.0.1 (18-04-2023) First Release **Features:-** - 'start' command to run react app - 'build' command to create build for react app - 'build:lib' command to create lib for react library - 'build:es' command to create es for react library - 'templates' command to create es for react library # Changelog and Release Notes # v0.0.14 (06-10-2025) **Feature:-** - Added integrity and crossorigin attributes for all the js and css files in index.html ```enableSubResourceIntegrity: true ``` **Adjustments:-** - add ts-loader to parse tsx and ts files # v0.0.13 (02-09-2025) **Adjustments:-** - Source map files are created in the smap/ folder by default. However, they are also being created in the js/ folder to resolve the issue where Murphy was unable to locate them. **Feature:-** - Added support for Murphy to be built as a separate chunk and injected as the top script in the initial HTML. - To enable this support , add this in your configuration ```murphyBootstrapHtml{ enable: true, chunkName: '', filePath: '' }``` # v0.0.12 (14-08-2025) - Fixed the initial i18n loading issue caused by using the same function in both the i18nRuntimeDealer plugin and decidePublicPath # v0.0.11 (07-08-2025) (had an issue while enable i18n chunk split plugin) - remove babel-plugin-module-resolver dependencies **Adjustments:-** - Public Folder configuration is separated for development and production **Bug Fix:-** - 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`. - Removed the babel-plugin-module-resolver dependency to resolve the alias resolution issue in the application. - Fixed the issue where a space in the variable name causes it to return an undefined value. - Fixed the URL path generation issue that occurred while using context in the development setup. # v0.0.10 (12-05-2025) **Feature:-** - `alias` support for `build:es` and `build:lib` - Add babel-plugin-module-resolver dependencies - Modify getBabelPlugin to include module resolver with aliases **Bug Fix:-** - Enhance runBabelForTSFile to handle both .tsx and .ts file extensions - Update mockApiHandler to ensure mock function is called correctly **Change:-** - Refactor defaultConfigValues.js to include cli options for enableRTLSplit ## v0.0.9 **Feature:-** - externals was added to Prevent bundling of certain imported packages and retrieve these external dependencies at runtime. - to use externals, we use the following pattern in `app > externals` : For example ``` externals: { <key> : <value> } ``` ## v0.0.6 (4-09-2023) **Feature:-** - 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`. - Added Resource Cleanup plugin to cleanup resource retained by build tool. this plugin is controlled by efc flag resourcecleanup flag. - added support for using regex expression to get group of chunks chunkId via Resource Hint plugin prefetch/preload hook. only will be activate when `resourceHints` => `allowPrefetchingMultipleChunks` as `true` - added support for glob pattern for custom chunks split logic. - added options to split chunks base config in the key `app` => `customChunksBaseConfig` as object **Change:-** - i18n name not generated issue fix. - public path not correctly set issue fix. - changing plugin hook stages in i18nRuntimePlugin and sourceMapPlugin ## v0.0.5 (6-08-2023) **Changes:--** - Typo fix in i18nRuntimeDealerPlugin.js - fixing some bugs in resolvers.js file ## v0.0.3 (1-08-2023) **Changes:--** - `devtool` default value changed from `hidden-cheap-source-map` to `source-map` - unwanted files deleted from build **Issue Fix:--** - The issue with the source map not being created in the build has been fixed." ## v0.0.2 (28-04-2023) **Features:-** - `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) - `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) - `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. - `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. - `enableChunkHash` renamed as `enableFileNameHashing` - `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`) - `createSeparateSmap` flag `source_map_enable` renamed as `enable_smap` - `removeAttribute` option changes as `babelCustomizations.removeAttribute` - `removePropTypes` support for remove the prop types package in the output build. - `devConsoleExclude` support for remove the _console statements_ such as _console.log_, _console.warn_ in the output build. - `manifestJson` default value set as false. - `customAttributes` support for add attributes to html, link , script tag in the output build. ## v0.0.1 (18-04-2023) First Release **Features:-** - 'start' command to run react app - 'build' command to create build for react app - 'build:lib' command to create lib for react library - 'build:es' command to create es for react library - 'templates' command to create es for react library