Remember anode+typescriptDevelop cli (similar to vue CLI) procedures

Development background

This content comes from a version iteration of the company

Because the company uses GET for state management of FLUTTER development (note that this GET is not an HTTP request and belongs to the flutter state manager framework)

This iteration added about eight new pages

Let’s look at what the developer needs to do to add a page to the project (for example, the OrderList page OrderList) :

  1. Create four new files

  2. Add routing configuration (locate the routing file and add a line of code at the bottom)

    class GlobalRouter {
  final String welcome = '/welcome';
  final String login = '/login';
  final String feedback = '/feedback'; ./// The order list
  final String orderList = '/orderList';
}
Copy the code

  3. Add GetPage configuration (6 lines + guide package)

    /// You need a guide package here
import 'xxxxxx';
class Global {
  static final List<GetPage> pages = [
    GetPage(
      title: 'Overall structure',
      name: MyRouters.global.home,
      page: () => HomePage(),
      binding: HomeBindings(),
    ),
    /// The newly written page needs to be configured below
    GetPage(
      title: 'Order List',
      name: MyRouters.global.orderList,
      page: () => OrderListPage(),
      binding: OrderListBindings(),
    )
  ];
}
Copy the code

    The above code is for reference only. The actual code OrderList should be configured in the corresponding business file and not in Global

    It seems to be okay. I can take it.

    But there are eight of these pages in this iteration, yes! It’s 8!!

    Add files one by one, write routes, this can tolerate??

    so

    I gave up on what I was doing (with plenty of iteration time) and spent half a day trying to solve the problem.

    Before in the small program development, used tools to generate Page, so I can immediately think of using Node to generate files, made cli way to achieve it.

start

Project selection

Personally, I prefer to write in TS (strongly typed languages), so the technology for this project is typescript + Node

Finishing requirements

The following functions are summarized:

  1. Using the COMMAND line interface
  • (Here can be associated with the previous small program framework generated page XXx-create-page XXXX)
  • So here we have the company name jsy-flutter -create < folder path > < folder name > [class name] 
    /// The sample
jsy-flutter -create D://work-proejct/flutter/my-app order_list OrderList
Copy the code

    Note: There is one detail that can be handled here. If the third parameter [class name] is not entered, just take the folder name and convert it to the big hump

  1. Generate the following four files according to the command above and write the specified code
  • bindings.dart
  • controller.dart
  • index.dart
  • page.dart
  1. Overrides the default class name in the file based on the given class name
  • The following 
    class OrderListPage extends GetView<OrderListController>{... }Copy the code
  1. Write the routing file according to the path
  • Add a routing statement to the end of the routing link file 
    class GlobalRouter {.../// The order list
final String orderList = '/orderList';
}
Copy the code
  • Configure it in the Get routing table and import the corresponding package 
    /// So here's the import statement
import 'package:xxxxxxx/order_list/index.dart'

class Global {
  static final List<GetPage> pages = [
    ......
    GetPage(
      title: 'Order List',
      name: MyRouters.global.orderList,
      page: () => OrderListPage(),
      binding: OrderListBindings(),
    )
  ];
}
Copy the code

Set up the project

Create the folder and pick up a shuttle

Initialize the project

Initialize the project

/ / generated package. Json
npm init

// Install dependencies
npm install nodemon --save-dev
npm install typescript --save-dev
npm install concurrently --save-dev
npm install @types/node --save

// Change package.json scripts
"scripts": {
  "dev:build": "tsc -watch"."dev:start": "nodemon dist/index.js"."dev": "concurrently npm:dev:*"
},
Copy the code

Initialize the tsconfig.json configuration

// Initialize the tsconfig.json file
tsc --init

// Change the tsconfig.json file to leave some of the configuration
{
  "compilerOptions": {
    "target": "es5"."module": "commonjs"."outDir": "./dist"."rootDir": "./src"."esModuleInterop": true."skipLibCheck": true."forceConsistentCasingInFileNames": true
  },
  "exclude": [
    "node_modules"]}Copy the code

The configuration file does not provide much description, details can be found here

Create the entry index.ts file

  • Create a SRC folder in the project root directory
  • Create/SRC/index. Ts
  • Write two random output statements

A test run

npm run build
Copy the code

Ok if it can print normally

Since we need to use the command line tool, we can use it directly

npm run build
Copy the code

Whenever the.ts file is updated, it is automatically compiled

Install the commander

This is an open source command line operation tool, detailed documentation here

npm install commander --save
Copy the code

Writing business logic

Basically, you generate a file and write a string

There is no more to show here, the project is ready for you gitee.com/XieTS/jsy-f…

Configuration bin

Add bin configuration to package.json file

"bin": {
  "jsy-flutter": "./dist/index.js"
},
Copy the code

Note: the front of the jsy-flutter is arbitrary, the back entry should run the file path correctly

Add code #! To the first line of the./dist/index.js entry file. node

#! node ... Here is the logical codeCopy the code

This must not be less, otherwise it will not work properly

Local test

Use the node command to test

node ./dist/index.js -create d://project order_list
Copy the code

or

npm link
Copy the code

Enter jsy-flutter -h

Ok succeeded

Delete test command, test NPM unlink is not easy to use, directly delete files more useful

where jsy-flutter
Copy the code

Delete the two corresponding files, along with the jsy-flutter files in node_modules in the folder above

Done! Then publish to NPM

Publish to private/public libraries

npm publish
Copy the code

Global installation dependency

npm install jsy-flutter -g
Copy the code

The jsy-flutter command can then be used anywhere

Let’s test our results

jsy-flutter -create D://project/ order_list OrderList
Copy the code

Done!!

Thinking summary

The whole development is actually relatively simple, is to write some specified code, through the NODE FS module to create a file, and write the file, the route modification logic is a little bit more complicated, but in fact we can get all the data we need to be able to

Write in the last

Actually in our daily during the development process, there are a lot of such repeated operation, the operation for our own ascension, there won’t be any is waste your time blindly, we more code can be used to accomplish these things, these are only a small case, then according to the actual situation, company create more cli tool, Solve our daily development of a large number of CV process!

Fight, front man!