This is the third day of my participation in the August Text Challenge.More challenges in August

Recently in the exploration of learning front-end engineering knowledge, found Vue mini small program framework project. Vue Mini is a framework that allows you to write applets using the Vue3 Composition API. Unlike many applets (taro, Wepy, etc.), Vue Mini is a framework that allows you to write applets using the Vue3 Composition API. Its underlying layer relies directly on @vue/ reActivity, emphasizing a lightweight runtime that does not rely on any compilation steps or involve any Virtual DOM. See official documentation for details. However, the current introduction is not how to use the framework or its implementation principle, but because the framework initialization build file build.js code is very small, very suitable for starting to learn engineering construction, next will be divided into several articles output related knowledge.

First, we create a new applet project with the following structure:

For those of us who are used to web development, we start with the simplest pain point requirement: it is too inconvenient to write style in native WXSS, I want to write style code in less, how do I do it?

Project preparation

To create a package.json file in the root directory of mini-demo -> SRC, use NPM init. Various build dependencies will be installed later.

Less and mixins.less files are usually created with less. Now I want to put the conventions of these two less style files in the SRC folder called styles, and then add the contents of these two files to each style file one by one during the project build.

Now that the project preparation is complete, what we need to do is build the project code implementation:

  1. Listen for changes to less style files in the SRC directory, compile less files into CSS in real time, and change the file name suffix to WXSS
  2. Output the SRC file as a whole to the dist directory

Create a build. Js

Create build.js in the root directory and add the script in package.json script

"dev": "node build.js",
Copy the code

Next we get the build code up and running using NPM run dev

Write the build.js build script

First, after starting NPM run dev, we implement:

  1. File listening function, NPM package: Chokidar
  2. File manipulation functions (such as moving files from SRC to dist), NPM package: fs-extra
  3. Less Compilation: NPM package: less
  4. Handling styles, NPM package: PostCSS

Please refer to the documentation for the usage of the above related packages. The following code is directly displayed, and it is not difficult to read with annotations:

build.js

const chokidar = require('chokidar'); const fs = require('fs-extra'); const postcss = require('postcss'); const less = require('less'); const path = require('path'); Async function dev() {// Async function dev() { Const cb = (filePath) => {if (/\.less$/.test(filePath)) {processStyle(filePath); return; } // copy the file to the dist directory fs.copy(filePath, filePath. Replace (' SRC ', 'dist')); } chokidar .watch(['src'], { ignored: ['**/.{gitkeep,DS_Store}'], }) .on('add', If (filePath. Include (path.join(' SRC ', 'SRC ',' admin ', 'admin ',' admin ', 'admin ',' admin ', 'admin ',' admin ') 'styles'))) return; cb(filePath); }).on('change', (filePath) => {// File contents change triggered logic console.log('change file: '+ filePath) if (filepath.includes (path.join(' SRC ', 'styles')) {// recompileStyles(); return; } cb(filePath); }); } async function processStyle(filePath,) {let source = await fs.readfile (filePath, 'utf8'); / / in the pages of each style file into the source of the definition of the variables and mixins content = ` @ import '${path. Resolve (' SRC/styles/variables. Less')} '; \n` + `@import '${path.resolve('src/styles/mixins.less')}'; \n` + source; Const {CSS} = await less.render(source, {filename: path.resolve(filePath),}); Const {CSS: WXSS} = await postcss().process(CSS, {map: false, from:) undefined }); Const destination = filePath. Replace (' SRC ', 'dist').replace(/\.less$/, '.wxss'); await fs.copy(filePath, destination); fs.writeFile(destination, wxss); } // Since file changes in the styles directory can affect multiple files, Function recompileStyles() {const watcher = chokidar.watch([' SRC /**/*.less', '! SRC /styles/**/*']); watcher.on('add', (filePath) => { processStyle(filePath); }); watcher.on('ready', () => watcher.close()); } dev()Copy the code

Now we add test data to the file in the styles directory

variables.less

@blue: blue;
Copy the code

mixins.less

.backgroundBlue() {
  background: @blue;
}
Copy the code

Open SRC -> page -> index.less and add to it

.test {
  .testone {
    .backgroundBlue()
  }
}
Copy the code

The dist directory was successfully generated by running NPM run dev:

Click index. WXSS to see the less file compiled successfully:

The source address

Warehouse source corresponds to the serial number of each article source