The purpose of this article is to explain how to turn uni-App project into wechat applets. Some basic knowledge is needed before you start.

Gulp basis

First, see how to use gulp to package and output to a specified directory.

Project directory

|-- output-test
      |-- App.vue
      |-- gulpfile.js
      |-- main.js
      |-- manifest.json
      |-- package-lock.json
      |-- package.json
      |-- pages.json
      |-- uni.scss
      |-- pages
      |   |-- index
      |       |-- index.vue
Copy the code

We want to output the contents of the Pages/directory to the dist directory.

  • Install gulp and create a new gulpfile in the project root directory

  • Type the following in the gulpfile.js file

    const gulp = require('gulp');
// Enter the directory
const srcPath = "./pages/**" 
// Output directory
const distPath = "./dist/";
// Define a task
const parse = () = > {
    return gulp
      .src([`${srcPath}/*.vue`] and {since: gulp.lastRun(parse)
      })
      .pipe(gulp.dest(distPath))
}
gulp.task(parse)
gulp.task(
    "build",
    gulp.series(
          "parse"))Copy the code

  • Add a command to package.json

    "scripts": {
    "build": "gulp build"
}
Copy the code

  • If you run build NPM, you can see that all vue files in the pages/ directory are exported to the dist directory.

Babel

Babel is a general-purpose, multipurpose JavaScript compiler. You give Babel some JavaScript code, Babel changes the code, and returns the newly generated code to you. Each step of the process involves creating or manipulating an abstract syntax tree (AST), and the AST Explorer gives you a visual view of the AST nodes. Open the site and type const a = 1 to get the following JSON object:

{
  "type": "Program"."start": 0."end": 11."body": [{"type": "VariableDeclaration"."start": 0."end": 11."declarations": [{"type": "VariableDeclarator"."start": 6."end": 11."id": {
            "type": "Identifier"."start": 6."end": 7."name": "a"
          },
          "init": {
            "type": "Literal"."start": 10."end": 11."value": 1."raw": "1"}}]."kind": "const"}]."sourceType": "module"
}
Copy the code

You can see that each node has the same structure (some attributes are omitted) :

{
  "type": "Literal"."value": 1
}
Copy the code
{
  "type": "Identifier"."name": "a"
}
Copy the code

The type field represents the type of the node, such as “Identifier”, “VariableDeclarator”.

Processing steps for Babel

The three main processing steps of Babel are: parse, transform and generate.

babylon

Babylon is the parser for Babel and is used to generate abstract syntax trees.

babel-traverse

The Babel Traverse module maintains the state of the entire tree and is responsible for replacing, removing, and adding nodes.

babel-types

The Babel Types module is used to construct, validate, and transform methods of AST nodes.

babel-generator

The Babel Generator module is a code Generator for Babel that reads the AST and translates it into a code and source map.

buildconst a = 1

We need to create four types of nodes (VariableDeclaration, VariableDeclarator, Identifier, Literal) in the abstract node tree. By querying the document, we can get the method of creating the node intuitively:

  • t.variableDeclaration(kind, declarations)

    • kind: “var” | “let” | “const”` (required)
    • declarations: Array<VariableDeclarator> (required)
    • declare: boolean (default: null)

  • t.variableDeclarator(id, init)

    • id: LVal (required)
    • init: Expression (default: null)
    • definite: boolean (default: null)

  • t.identifier(name)

    • name: string (required)
    • decorators: Array<Decorator> (default: null)
    • optional: boolean (default: null)
    • typeAnnotation: TypeAnnotation | TSTypeAnnotation | Noop (default: null)

  • t.numericLiteral(value)

    • value: number (required)

According to the abstract syntax tree, the complete code for creating nodes from the inside out is as follows:

const babylon = require('babylon')
const t = require('@babel/types')
const generate = require('@babel/generator').default

const code = ' '
const ast = babylon.parse(code) / / generated AST

const kind = "const"
const id = t.identifier("a") // a
const init = t.numericLiteral(1) / / 1
const declaration = t.variableDeclarator(id, init) // a = 1
const variableDeclaration = t.variableDeclaration(kind, [declaration]) // const a = 1

ast.program.body.push(variableDeclaration)

const output = generate(ast, {}, code)
console.log(output.code) // const a = 1
Copy the code

willconst a = 1Replace withconst b = 1

Paths

Path is an object that represents the connection between two nodes.

For example, if you have the following node and its children

{
  type: "FunctionDeclaration".id: {
    type: "Identifier".name: "square"},... }Copy the code

The child Identifier, expressed as a Path, looks like this:

{
  "parent": {
    "type": "FunctionDeclaration"."id": {... },... },"node": {
    "type": "Identifier"."name": "square"}}Copy the code

Path also contains many other methods for adding, updating, moving, and removing nodes. It is easy to replace const a = 1 with const b = 1. A is a node of Identifier, we just need to traverse the syntax tree, Call path.replacewith (node) when accessing a to replace the node.

The complete code is as follows:

const babylon = require('babylon')
const t = require('@babel/types')
const generate = require('@babel/generator').default
const traverse = require('@babel/traverse').default

const code = 'const a = 1'
const ast = babylon.parse(code)

traverse(ast, {
    Identifier(path) {
        if (path.node.name === 'a') {
            path.replaceWith(t.identifier("b"}}})))const output = generate(ast, {}, code)
console.log(output.code) // const b = 1
Copy the code

This article explains the basic knowledge about uni-App to be transformed into wechat applets, and the next article will expand on the transformation method in detail.

Reference links:

  • www.gulpjs.com.cn/
  • Github.com/jamiebuilds…
  • Segmentfault.com/a/119000001…
  • zhuanlan.zhihu.com/p/88899071
  • Cloud.tencent.com/developer/a…
  • zhuanlan.zhihu.com/p/59355857