background

Due to the personal development of native micro channel small program feeling very boring, thought of using packaging tools to optimize the development process, browsing online a lot of gulp, Webpack to achieve small program development projects, all kinds of, but always feel a lot less I want, such as hot update, NPM package construction, the use of new ES6 +.

So thinking about achieving a set of accord with personal expectations of shelves, and it is configurable, for the use of company and everyone, from the birth of the project, the hope can help you, or have good Suggestions and ideas to communicate with everyone, then introduction about this project for you, and want to in the subsequent series on this project in detail and do a small program for everyone to view, Thank you for your patience!

The project address

$git clone https://gitee.com/xiaomo_simon/gulp-mini-program $git clone https://github.com/xiaomosimon/gulp-mini-programCopy the code

function

  • Compatible with wechat development platform to build NPM (temporarily solve the problem of not being able to use third-party library)
  • Sass can be used to automatically convert to WXSS to the corresponding folder after packaging
  • Babel transforms JS and compresses it
  • Compress image, JSON, WXML
  • Hot update
  • Automatically assign static files to the corresponding folder after packaging (configurable)
  • Eslint build-time validation (configurable)
  • Create a Page or Component template
  • Eslint detection before Git commit (configurable)

Project environment

  • node+npm
  • Gulp -cli (NPM install -global gulp-cli)
  • Wechat developer tools

Project introduction

Initialize the

Json file to configure your miniprogramRoot and appID miniprogramRoot

{
  "miniprogramRoot": "miniprogram/"."appid": "12313123123"
}
Copy the code

Then execute NPM install in the project root directory

$ npm install
Copy the code

usage

basic

Direct use is as follows:

$NPM run dev = $NPM run dev = $NPM run dev = $NPM run dev Set the miniprogramRoot value to $NPM run build in the project.config.json file when uploading the versionCopy the code

If you want to customize the configuration, please do it in the build folder and gulpfile.js file (if you have gulp base).

Add the template

You can add pages or Components, but you need to install the gulp command-line tool: gulp -CLI

$NPM install --global gulp-cliCopy the code

Use as follows:

Create a page or component with a p or c argument. $gulp add -c mine $gulp add -p mine $gulp add -p mine $gulp add -p mine $gulp add -p mine $gulp add -p mineCopy the code

Tip: If you want to customize the configuration, you can do it in the. Template folder and gulpfile.js file

Build NPM using third-party packages and development tools

The following figure shows that NPM init needs to be done in SRC (our actual development directory), and then download the third package. Make “miniprogramRoot” in project.config.json file “SRC /”. Finally click tools –> Build NPM to generate the miniprogram_npm package, so you can import the third package directly under JS, and after the final development or hot update state will be directly copied to the package directory

Details as follows:

1. Init NPM in SRC (our actual development directory)

2. Download the third package. Wxbarcode is used as an example

Wxbarcode $NPM Installl wxbarcodeCopy the code

Json file “miniprogramRoot” to “SRC /”

4, then go to tools –> build NPM to generate miniprogram_npm package

5. In this way, the third package can be introduced directly under JS

It can run normally after packing

other

Minimist defines variables

You can get the commonconfig. parseArgs variable by importing build/ commonconfig. js.

Variables can be defined using the gulp command with the – form;

$gulp build-mode development-custom hellWordCopy the code

To configure scripts using package.json, use –xx;

{
 "scripts": {
  "dev": "gulp dev"."build": "gulp build --mode production"."test": "gulp dev --mode test --test hello"}}Copy the code

Eslint validation before Git commit

Rely on:

$ npm install --save-dev pre-commit lint-staged
Copy the code

Configuration: package. Json

{
    "scripts": {
        "dev": "gulp dev"."build": "gulp build --mode production"."lint-staged": "lint-staged"
    },
    "pre-commit": "lint-staged"."lint-staged": {
        "src/**/*.js": "eslint"}}Copy the code

The problem

  1. How to gracefully support the new ES6 + syntax and convert to ES5;

  2. Q: How to package third-party libraries and make small programs run normally, such as moment.js, lodash.js and other tool libraries;

    A: The introduction of third-party libraries is currently resolved by using third-party packages and building NPM using development tools

  3. How to support WXS with es6 syntax Babel converted to make applets run properly; eg:

let a = 1000;

// --> convert to the following code, but the applet does not support

var a = 1e3;
Copy the code

 

hope

  1. When I write this shelf, I want to carry out personal small program development through this shelf. Under the native writing small program, there will be the situation of increasing package capacity, there will be many solutions, such as subcontracting, tool compression, etc., but I also see many mixed points, such as the problems I wrote 1 and 3.

  2. I would like to optimize this shelf while using it to make a small program, and invite volunteers to participate in the optimization and improvement of this project, and achieve the purpose of learning through this, welcome your PR.

  3. We are sorting out the writing process, and putting the specific implementation and thinking process in each community, so that everyone can customize the configuration and use it.

 

I am Xiao Mo _Simon, thank you for reading to the end, we come together!

You are also welcome to pay attention to me:

Email address: [email protected]

WeChat:

Wechat official account (under construction) :