Rax is a cross-terminal solution of Ali. Because it involves multiple terminals, MiniApp has undergone the transformation from compilation to runtime, so there are many warehouses, which is difficult to find. However, the related miniApp is concentrated in raxJS/MiniApp warehouse, which mainly involves compilation:
- Jsx2mp – CLI: the lowest level CLI tool for compiling applets, which is used to obtain webPack configuration
- Jsx-compiler: Compiles the contents of Rax components into the contents of four files of applets
- Jsx2mp-loader: Use JSX-Compiler to process Rax components and then generate files
- Jsx2mp-runtime: Runtime for compiled applets
As a simple demo, app.json is used to declare some configuration of the applet, and tells jSX2mp – CLI applet’s Pages path, which is used to generate entry for the WebPack configuration
The generated product is not like the normal webPack packaged product, and there is no webPack runtime code such as __webpack_require__, very clean, directory structure is the same as before, but the original Rax component into small program 4 files, Node_modules dependencies are also put into the generated NPM folder
Run the jsx2mp start command to get the webpack configuration as follows. In entry, appLoader and pageLoader are added through URL, js and TS files are processed by scriptLoader. Other static resource files are processed through fileLoader. After the WebPack Compiler is configured, the outputFileSystem is set to memFS so that webPack artifacts are not generated into DIST
If there is appLoader, pageLoader, componentLoader in this. Loaders, it means that it is not an ordinary JS file, and directly return to the corresponding loader. If not, it indicates that it is a common JS file, or an external small program component package, external small program component package processing with componentLoader similar, here skip; The regular JS file will call output and write to dist. Output will determine whether it is generated in the NPM folder based on whether it is a file in node_modules. The loader returns the content directly
AppLoader, pageLoader, and componentLoader work in the same way. They call JSX-Compiler to get the content of the applet, and then call output in loader to generate the 4 files into DIST. The content of loader return is only a string of import, and the URL of import is all the dependencies of the file. Then write the corresponding Loader on the URL according to the dependency type. In addition, files are directly written to Dist through output, so the function of return is just to tell Webpack the dependencies of files, and continue to use Loader to process the dependencies, so as to recursively until all required files have been processed and output to Dist
FileLoader copies static resources directly into dist
Dist/NPM: JSX2MPRuntimePlugin: JSX2MPRuntimePlugin: JSX2MPRuntimePlugin: JSX2MPRuntimePlugin The rax-app referenced in the original file is also replaced by the runtime relative path during compilation with the JSX-Compiler
From createPage in the Runtime, which can be described as an enhancement to native applets, the real Page objects are created. This allows you to use hooks in the component (implementation is similar to hooks in Preact). The JSX part is compiled to this._update… Every time the component renders, it calls hooks to get the state, runs sideEffects, and this._update… Call this.setData to update
Rax compiled build through loader directly output file, different from TARO2 build is less packaging this step, only do what must be done, and the other can be handed over to the native small program packaging tools for packaging and do some optimization