introduction
One of the key points of a technology being widely used is engineering. The front-end has evolved from simply writing webpages and styles at the very beginning to needing to deal with complex logic. The accompanying problem is that there are more and more related files. Simply quoting in webpages can’t solve the problem, and related engineering tools are needed. to handle and optimize this process. There are also many solutions in the front-end community, such as rollup, parcel, webpack, esbuild, etc., which can handle problems better in different situations. Among them, webpack, because of its microkernel architecture, under the condition of stable and excellent core functions, developers can flexibly control various processes, making its surrounding ecology more diverse and more complete, and gradually become the first choice in various solutions.
But it is precisely based on the flexibility of its microkernel architecture and the diversity of its ecology that its complexity has skyrocketed. Inexperienced engineers often don't know much about their configuration, and waste a lot of time solving configuration problems, which affects development efficiency. At the same time, how to better optimize packaging efficiency also requires a certain amount of accumulation. The data stack front-end team encapsulated ko based on webpack, and successively practiced and optimized it in the data stack index management, business center, message management center and other product lines, which finally simplifies the configuration and other issues, and the packaging efficiency is 2 times higher than before. The above improvements have perfectly solved the above problems.
Overall structure
The overall architecture of ko is as follows:
As a whole, it is a monorepo, with the help of lerna and yarn workspace to facilitate package management, among which:
- babel-preset-ko-app is a babel preset for ko, used by babel-loader
- ko-config integrates lint-related configuration and dependencies such as eslint, prettier, stylelint, etc. for ko-lints
- ko-lints integrates eslint, prettier, stylelint and other lint related tools
- As the entry point of the entire tool, ko integrates ko-lints and integrates core functions related to dev and build
Application in Number Stack
In terms of overall architecture, ko currently integrates functions related to packaging and formatting, so how is ko applied in the data stack? Let's take the entire R&D process of the Shun stack product business center as an example.
develop
The first is the development process. The configurable items related to ko dev are as follows:
- -p, --port <port>: configure port number
- --host <host>: configure host
- -t, --ts: typescript support
- -a,--analyzer: use webpack-bundle-analyzer for analysis of packaging results
Also related to it is ko's configuration file ko.config.js, we just need to add the following to the configuration file:
module.exports = {
entry: ['./src/app.tsx'],
devServer: {
proxy,
host: '127.0.0.1',
port: 8082,
},
};Specify several necessary configurations in the development phase and execute the ko dev -t command, you can see the program is running normally at http://127.0.0.1:8082
code review
In the R&D system of the entire data stack, the code review link will first use eslint to test the code writing, etc. After the test is passed, the subsequent review steps will be carried out. The function of code testing with the help of tools is also integrated into ko.
The configuration items related to ko eslint are as follows:
- -f, --fix: enable automatic fix
- -c, --config <path>: eslint custom configuration path
- --ignore-path <ignorePath>: The file configuration path that eslint needs to ignore, the default is .koignore
We only need to execute ko eslint or ko es to detect the code format, etc. ko integrates reasonable eslint configuration items by default, and you can also use -c, --config <path> configuration items to customize configuration items.
Similar to ko eslint, there are ko prettier and ko stylelint, which use prettier and stylelint to detect and format related code, and the usage is basically the same as ko eslint
build
After the development and code review are completed and the test is passed, we can publish the content of the current version to the online environment. At this time, we need to use ko build to package the content of the current version.
The configuration items related to ko build are as follows:
- --hash: add hash to package file name
- -t,--ts,--typescript: typescript支持
- -e,--esbuild: esbuild support, currently only esbuild compression related functions are used
Execute the ko build -t command, wait for a short time, and the packaging result will be output to the dist folder of the current directory
At this point, the entire R&D process is over. It can be seen that ko has a high degree of participation in the entire R&D process of the data stack, involving three important stages of development, code review and build.
Efficiency improvement
Under the condition of ensuring the stability of the entire R&D process, ko also optimizes the packaging process during version iteration. The optimization results are as follows:
It can be seen that the current 5.x version of ko has a more obvious improvement in the speed of the first packaging and the second packaging compared to the 4.x version of the ko
Future direction
The front end is still in a stage of rapid development, and new solutions such as Vite and Rome have emerged in the community. ko will continue to try new technology applications and new directions in the process of iteration. In 2022, ko will try to focus on the following points to improve efficiency and ease of use:
- Relying on the new module federation of webpack 5, try to improve the packaging speed and practice of micro front-end
- Try more esbuild related functions to improve packaging efficiency
- Formulate more detailed eslint and other rules to serve the various product lines of the data stack and even the community
Looking forward to doing better in 2022, and contributing to the front-end team of the data stack and even the open source community