uni-pages-hot-modules
github uni-app project example
npm package source code
Modularization and module hot reload of uni-app
Solve the problem of uni-app's inability to modularize, and solve the problem of module hot reload and cache
Install
npm i uni-pages-hot-modules -S
Notice!
It was found that the support level of uni-app will be different every time it was updated. For example, a certain version actually commented out the right hot reload dependency, which is compatible here. As long as uni-app does not overturn its own design, this function will be effective for a long time
What did uni-pages-hot-modules do
// I did something very light, which is equivalent to(modulePath) delete [modulePath] require(modulePath)
uni-app's "Eastern Egg"
Uni-app comes with a webpack loader hook file, which can be valid if it is established (as same as the same level) in the project src directory (it still needs to exist as the initial value. It is recommended to store some routing-independent configurations).
Requires CommonJS specification to output a hook function directly.
Output function parameters
pagesJson < Object >
Analysis content
loader < Object >
The hook property of uni-pages-loader, { addDependency < Function > }
addDependency
Used to manually add dependency modules for uni-pages-loader
Modularity
Since it is js, the dependency of the module can be implemented.If the module's hot reload problem is not considered, you can directly use require to introduce dependenciesBut in most cases, modules that need dependencies can also be updated through hot reload. Since they are not standard operation dependencies of webpack, they need to manually add dependencies (using addDependency) and need to clear the module's cache every time, so uni-pages-hot-modules were born
Example
=(pagesJson,loader)=>{
// You need to pass the loader in as initialization, and you only need to initialize it once after v0.0.6 const hotRequire = require('uni-pages-hot-modules')(loader)
return {
"pages": [
{
"path": "pages/about/about",
"style": {
"navigationBarTitleText": "Test 1"
}
},
...hotRequire('./')
],
"subPackages":[{
"root": "pages/test",
"pages": [{
"path": "about",
"style": {
"navigationBarTitleText": "test"
}
}]
}]
}
}
Module specifications
The loaded module is also the CommonJS specification, and it is output
Example
// After v0.0.6, loader is no longer required to be provided for internal use of modulesconst hotRequire = require('uni-pages-hot-modules')
=[
{
"path": "pages/sub/sub",
"style": {
"navigationBarTitleText": "sub"
}
},
...hotRequire('./')
]
other
Conditional compilation does not support, you need to judge by yourself through .UNI_PLATFORM, and you need to add env variables to judge by yourself for custom environment.
Using uni-pages-hot-modules to introduce modules, you must enter the full file name including the suffix, otherwise there will be no hot reloading.
The above is the detailed content of the uni-app processing solution example. For more information about uni-app processing, please pay attention to my other related articles!