preface

Hello, I am fat, the thing is, a lot of problems in the development of small programs, although the impact on the daily development without too much, but have a problem or want to be able to resolve themselves, this is a good opportunity to learn, and there was this article, the key is used to record their problems (I’m afraid I forgot)

The applets were developed using uni-app

The first problem: change the pit of the environment

Zha fat thing

Uni-app has two default commands for writing wechat applets

"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch"."build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build".Copy the code

We will also use NODE_ENV to determine whether to use your company’s test domain name or production domain name. Once I encountered a situation that I wanted to use the production domain name for dev or test domain name for build. Why did this happen? Sometimes publishing to beta for testing requires using the test domain, but publishing to build is required. One way to do this is to manually comment the switch, but that doesn’t seem smart.

How to do

So I came up with an idea to add two commands, NODE_ENV=production for dev and NODE_ENV=development for build.

"dev-pro": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"."build-dev": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build".Copy the code

Run…

Dist /dev/mp-weixin = dist/dev/mp-weixin = dist/dev/mp-weixin = dist/dev/mp-weixin Of course we don’t want the packaged file to run away, because uni-app is using this to determine, which means we can’t use NODE_ENV to determine.

If NODE_ENV exists, I can define my own variable, so I define API_ENV in the command store. I use this to determine the environment, but I find that config does not capture this, but NODE_ENV does. So webpack did define, so we’re going to do define as well

Find the vue. Config. Js

const path = require('path');
const webpack = require('webpack');
const vars = path.resolve(__dirname, 'src/style/variable.less');
const { API_ENV } = process.env;

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true.globalVars: {
          hack: `true; @import "${vars}"`,},},},},chainWebpack: config= > {
    config.plugin('define').tap(args= > {
      args[0] ['process.env'].API_ENV = JSON.stringify(API_ENV);
      returnargs; }); }};Copy the code

Add chainWebpack configuration to expose the API_ENV so that you can get it, and then you can check the environment in your own config file to see if it doesn’t affect the package, just add a few more commands and use it instead

"dev": "cross-env NODE_ENV=development API_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"."dev-pro": "cross-env NODE_ENV=development API_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"."build-dev": "cross-env NODE_ENV=production API_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build"."build": "cross-env NODE_ENV=production API_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build".Copy the code

Second problem: optimization of package code upload

Zha fat thing

As we all know, applet upload code and promotion need to click upload or use CI in the development tool. Maybe you can refer to my article, applet CI package. Another case is using a multi-terminal framework, uni-App or Taro, where the upload code needs to be packaged. Dist /build/mp-weixin folder will be generated after uni-App is packaged. How to upload the folder? Developer tools will be used to open and run the folder, then upload the code according to the normal process. Speaking of which, there is a problem, the students at the time of development will also open a developer tools, open file is dist/dev/mp – weixin, believe that many students don’t want to turn off this, after all, the black can continue to develop, more important is the company’s computer is very card 😁, at that time I was thinking about how to don’t open many a tool to upload

How to do

According to the above, my solution idea is to use one tool to do everything. After thinking about it, I found that the code is uploaded to the folder dist/build/mp-weixin, while the running code hot update usually uses the dev command. Dist /dev/mp-weixin folder is stored in the tool, so if we can copy the mp-weixin folder of the successful build to the mp-weixin folder of dev, we can solve the problem of opening multiple tools, and even upload the code directly after packaging

This will allow you to write a simple script that will copy one folder to another

const fs = require('fs');
const { stat } = fs;

const copy = (src, dst) = > {
  // Read the directory
  fs.readdir(src, (err, paths) = > {
    console.log(paths);
    if (err) {
      throw err;
    }
    paths.forEach(path= > {
      // eslint-disable-next-line no-underscore-dangle
      const _src = `${src}/${path}`;
      // eslint-disable-next-line no-underscore-dangle
      const _dst = `${dst}/${path}`;
      let readable;
      let writable;
      stat(_src, (err, st) = > {
        if (err) {
          throw err;
        }

        if (st.isFile()) {
          readable = fs.createReadStream(_src); // Create a read stream
          writable = fs.createWriteStream(_dst); // Create a write stream
          readable.pipe(writable);
        } else if(st.isDirectory()) { exists(_src, _dst, copy); }}); }); }); };const exists = (src, dst, callback) = > {
  // Tests whether a file exists in a path
  fs.exists(dst, exists= > {
    if (exists) {
      / / does not exist
      callback(src, dst);
    } else {
      / / there
      fs.mkdir(dst, () = > {
        // Create directorycallback(src, dst); }); }}); }; exists('./dist/build/mp-weixin'.'./dist/dev/mp-weixin', copy);
Copy the code

Next change the following command, build successfully run script on the pull

"build-dev": "cross-env NODE_ENV=production API_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build && node buildScript.js"."build": "cross-env NODE_ENV=production API_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build && node buildScript.js".Copy the code