Buildtime Domain Model
Build Artifacts
If you wish to use the Reactium SDK and hooks system to change the behavior of Gulp tasks or Webpack compilation for your plugin, you can use build-time DDD artifacts to register your behaviors.
reactium-gulp.js
Reactium's build process is started and primarily controlled by Gulp tasks:
As you can see above, there are many tasks performed with Gulp, and you may wish to create, change, or delete tasks that are run during the build, and this can be done with ease using the reactium-gulp.js artifact.
When you start the build (npm run build
or npm run local
for product or local development respectively), really you are invoking the gulp
default task, which in turn will kick off a number of other tasks in series or in parallel.
An abbreviated summary of the default gulp task starts a series of tasks as follows:
A stub preBuild task (does nothing, meant to be optionally implemented by your project)
Cleanup tasks to prepare the project directory (ensure
reactium_modules
directory exists, remove contents of public, ...)Prepare a set of source manifests based on DDD artifacts found throughout your project.
Build static html markup and any generated json files
Process assets such as images, and compile CSS (using SASS)
Compile your application javascript with Webpack
Build any UMD (Universal Module Definition) files with Webpack
Create a Google Workbox service worker
Compress all compiled assets (for quicker delivery)
Generate API docs
A stub postBuild task (does nothing, meant to be optionally implemented by your project)
ReactiumGulp
Prior to running any Gulp task, all of the tasks are registered to a global singleton ReactiumGulp, that is made available to any reactium-gulp.js file found in your project under:
anywhere in the src directory (or any subdirectory)
anywhere in the reactium_modules directory
If a reactium-gulp.js file is found anywhere in one of these location, it will be loaded during the initialization of Gulp prior to running any gulp task. Inside this file, you may register one or more Reactium Gulp synchronous hooks to change the behavior of the gulp build for the whole project.
Hook
Usage
config
Synchronous hook that provides the gulp configuration and webpack configuration prior to running tasks.
tasks
Synchronous hook that provides the Registry (register, unregister) of each Gulp task prior to use.
reactium-webpack.js
When the Gulp scripts task is run, Gulp will run the Webpack compilation specified by the overridable configuration in .core/webpack.config.js. Likewise, when compiling any UMD (Universal Module Definition) javascript modules during the Gulp umdLibraries task, Gulp will run the Webpack compiliation specified by the overridable configuration provided in .core/umd.webpack.config.js.
ReactiumWebpack
Prior to running any either the main or umd Webpack compilations, the webpack configuration is run through a series of hooks that are registered to a global singleton ReactiumWebpack, that is made available to any reactium-webpack.js file found in your project under:
anywhere in the src directory (or any subdirectory)
in any node module directory located in a reactium-plugin directory
anywhere in the reactium_modules directory
If a reactium-webpack.js file is found anywhere in one of these location, it will be loaded during the initialization of Webpack configuration prior to running any compilation. Inside this file, you may register one or more Reactium Webpack synchronous hooks to change the behavior of the webpack compilation for the whole project.
Hook
Usage
before-config
Provides the WebpackSDK as an argument
externals
Provide the WebpackSDK.externals registry, WebpackSDK.name, and WebpackSDK.context
ignores
Provide the WebpackSDK.ignores registry, WebpackSDK.name, and WebpackSDK.context
rules
Provide the WebpackSDK.rules registry, WebpackSDK.name, and WebpackSDK.context
plugins
Provide the WebpackSDK.plugins registry, WebpackSDK.name, and WebpackSDK.context
Both of the main webpack configuration and the umd configurations are built using a helper object, WebpackSDK:
WebpackSDK
This class provided the following public properties and methods, to aid in managing your Webpack configuration:
WebpackSDK setters
Most of the webpack configuration that is not terribly complex is handled with simple setters.
Setter for the webpack mode configuration property
Setter for the webpack entry configuration property
Setter for webpack target configuration property
Setter for webpack output configuration property
Setter for webpack devtool configuration property
WebpackSDK Methods
Automatically configures the webpack optimization configuration property, attempting to code-split Reactium javascript bundles into chunks that can be lazy loaded automatically by webpack, optimized to Reactium's logical components.
Argument
Type
Description
env
String
'development' or 'production'
Automatically configures the webpack optimization configuration property, attempting to code-split Reactium javascript bundles into chunks that can be lazy loaded automatically by webpack, in a way that is fairly default Webpack code-splitting behavior.
Argument
Type
Description
env
String
'development' or 'production'
Automatically configures the webpack optimization configuration property, setting up Reactium to bundle everything together in one monolithic bundle.
Argument
Type
Description
env
String
'development' or 'production'
Used to register Webpack plugins, and give them an id, so they can be overridden or removed.
Argument
Type
Description
pluginId
String
Unique id of the webpack plugin instance, so that it can be manipulated.
plugin
Webpack Plugin
Instance of a Webpack plugin
Used to register Webpack module rules, but give them an id, so they can be easily overridden or removed.
Argument
Type
Description
ruleId
String
Your identifier for the module rule.
rule
A webpack rule object
A special registry that manages the webpack.IgnorePlugin, allowing you to easily specify regular expression that will instruct Webpack what sort of modules to ignore.
Argument
Type
Description
ignoreId
String
Your identifier for the ignore pattern
regExp
RegExp
Regular express pattern to ignore.
A special registry that manages the webpack.ContextReplacementPlugin, allowing you to easily specify regular expression that will instruct Webpack what sort of modules to ignore.
Argument
Type
Description
contextId
String
Your identifier for the webpack context
contextMap
Object
Object with from regex pattern to match and to path to map the webpack context.
Last updated