Build yourself a scaffold

background

One, jump out of the comfort zone

Most front-end players, including myself, are often vue-CLI or create-react-app shuttles. I have to admit that these famous scaffolds are really well written and can speed up our projects. But over time, it’s easy to get into your comfort zone. Isn’t “jumping out of your comfort zone” all the rage these days? And all the major training institutions are doing selling anxiety, in order to make more people can buy classes.

I’m not going to sell anxiety here. You have your choice, as long as you don’t regret it.

Two, the defects of scaffolding on the market

Although vue-CLI and other scaffolding has been laid out for many things, including router, CSS parsing and so on.

But!

But ah, but the scaffolding doesn’t know the network requests of our company or our individual projects, and there is no unified handling of how network requests are encapsulated internally. I don’t know about our common landing pages, etc. These need us to CV again, or do it again.

Three, excessive use of scaffolding built by others may bring the following problems

  • Forget, or do not know the configuration of Webpack or routing, often will be in the interview at the eleventh hour, can not really master, after all, it is an armchair plan
  • Some common potholes have been stepped on and paved by others. It is easy to delay a lot of time if there is a problem without understanding the principle and stepping on the pit
  • Some of the new framework upgrades can only be enjoyed after someone else’s CLI version has been upgraded. One step behind!
  • Configure something project-related, often with documentation.
  • …

Four, why

We do scaffolding for several reasons

  • Learn the idea of scaffolding
  • Understand the composition of scaffolding
  • Omit CV operation, faster and more flexible to start your own company or personal projects
  • You can deeply configure your own projects

start

The preparatory work

commander

The complete solution for the Node.js command line interface. It is basically a prerequisite for front-end scaffolding.

This is just an introduction

  • version
  • command
  • description
  • action

Simple use, after all, is just the beginning, the follow-up of some complex customization will need you to explore.

All right, take it!

How does it work?

const { program } = require('commander')
program
  .version(`react-cli-mobile ${packages.version}`)
  .command('create <name>')
  .description('Initialize template')
  .action((projectName, cmd) = > {
    const options = cleanArgs(cmd)
    creator(projectName, options)
  })
Copy the code

fs-extra

Fs-extra module is an extension of fs module, which provides more convenient API and inherits THE API of FS module

This is just an introduction

  • Copy Copy files

  • existsSync

Copy is used for replication. Some scaffolding tutorials on the web use the [download-Git-repo] library. I found that this can only download the files of a certain warehouse, so my project will have two. One is the code for scaffolding, and the other is the repository for template. I don’t think this is suitable for me, because I don’t want to spend too much time on the scaffolding for interaction. I just want to build my project more conveniently and faster. Moreover, I don’t want to build two warehouses, which I think is a bit redundant.

Of course, this is my personal opinion, you can choose.

How does it work?

const fs = require('fs-extra')
if(fs.existsSync(targetDir)) {
    console.error('Directory already exists')
    return
}

// Copy the template file
  await fs.copy(src, dest)
Copy the code

path

Fs-extra is a library that provides a path to copy

How does it work?

const path = require('path')
const src = path.resolve(__dirname, dir);

const dest = path.resolve(process.cwd(), projectName);

// Copy the template file
await fs.copy(src, dest)
Copy the code

Ok, so far almost one of our scaffolding can come out, some other log color, path judgment, word difference optimization are not within the scope of this introduction, this paper is mainly to complete a scaffold, and then the focus is still my own template.

steps

  • Create your own folder
  • NPM init configuration
  • Get the information entered by the user
  • Place your initialization project under the Template folder
  • Cpoy path and its own template path, and then copy

You can look at the weboack configuration and put it in your template juejin.cn/post/684490…

code

I won’t paste the code here

You can go directly to react-CLI-Mobile to see some more subtle operations.

conclusion

Originally from the Webpack configuration from scratch to build a by

  • fetch
  • webpack
  • Less (CSS Modules are configured
  • react
  • React-router implements lazy loading in react
  • typescript
  • Mobile adaptation (using VW adaptation)
  • Babel is compatible with lower versions

As you can

  • npm install react-cli-mobile -g
  • react-cli-mobile create xx
  • cd xx
  • npm install
  • npm start
  • Open http://localhost:9000

Or just look at the source code

You can go directly to react-CLI-Mobile

The last

Where is wrong, or write badly, or don’t understand welcome everyone in the comments section

We will continue to publish webpack configuration articles from the zero configuration mobile terminal! Welcome to your attention! Thank you very much! (This has been updated: juejin.cn/post/685041…