原生小程序之工程化探索

前言

习惯用webpack对项目开发工程化，接触小程序后，稍微有点不适应，市面上有taro等优秀的小程序框架可以使用，由于负责项目历史背景，而无法大规模改造，因此只能做一些简单的工程化方案

规范代码

• 配置eslint
• vscode 安装插件 eslint
• 配置husky，利用git commit 钩子进行 eslint检查，检测不通过不能提交代码

1.package.json

"lint-staged": {
    "**/*.(js)": [
      "pretty-quick --staged",
      "eslint --ext .js",
      "git add"
    ],
    "run/*": [
      "git rm --cached"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run build && git add . && lint-staged"
    }
  }

2.配置 .eslintrc

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module',
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: 'eslint:recommended',
  plugins: ['import'],
  rules: {
    'arrow-body-style': [2, 'as-needed'],
    'wrap-iife': [2, 'inside'],
    camelcase: [
      0,
      {
        properties: 'always',
        ignoreDestructuring: true,
      },
    ],
    'no-var': 2,
    'one-var': [2, 'never'],
    'no-undef-init': 2,
    'default-case': 2,
    'prefer-template': 0,
    'no-useless-concat': 2,
    'no-multi-str': 2,
    'no-new-object': 2,
    'object-shorthand': [2, 'always'],
    'prefer-object-spread': 2,
    'no-array-constructor': 2,
    'max-params': [2, 6],
    'prefer-rest-params': 2,
    'no-useless-constructor': 2,
    'no-eval': 2,
    'no-throw-literal': 2,
    'import/no-unresolved': [2, { commonjs: true, amd: true }],
    'import/namespace': 2,
    'import/default': 2,
    'import/export': 2,
    'no-unused-vars': [
      'error',
      {
        vars: 'all',
        args: 'after-used',
        ignoreRestSiblings: false,
      },
    ],
  },
  globals: {
    wx: true,
    App: true,
    Page: true,
  },
};

3.配置项目文件 .vscode/settings.json，保存时自动eslint检查

{
  "files.associations": {
    "*.wxml": "xml",
  },
  "eslint.enable": true,
  "eslint.options": {
    "extensions": [".js"]
  },
  "eslint.validate": ["javascript"],
  "eslint.run": "onSave"
}

格式化代码-prettier

1.安装 prettier、pretty-quick 及 配置 .prettierrc

{
  "printWidth": 120,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5",
  "insertPragma": false,
  "endOfLine": "lf",
  "semi": true,
  "trailingCommas": "es5",
  "arrowParens": "avoid",
  "overrides": [
    {
      "files": "*.wxml",
      "options": {
        "parser": "html"
      }
    }
  ]
}

2.配置项目 .vscode/settings.json，保存时，自动格式化

{
  "editor.formatOnSave": true
}

单元测试 – Jest

1.安装 jest、@babel/core、@babel/preset-env、babel-jest

2.配置package.json

"scripts": {
    "test": "jest ./test/index.test.js --coverage"
}

3.编辑 .babelrc

{
  "presets": ["@babel/preset-env"]
}

4.创建 test 测试文件夹

• 创建 index.test.js

require('./unit/xxx.test.js');

5.编写测试脚本

import { sum } from '../util.js';
// case1
describe('函数单元测试: sum函数', () => {
  test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
});

注入环境变量

方案一：rollup

1.安装 rollup、@rollup/plugin-replace

2.配置 package.json

"scripts": {
    "dev": "rollup -c --environment NODE_ENV:dev",
    "build": "rollup -c --environment NODE_ENV:prod",
}

3.git commit时，自动切换回build环境

"lint-staged": {
    "**/*.(js)": [
      "pretty-quick --staged",
      "eslint --ext .js",
      "git add"
    ],
    "run/*": [
      "git rm --cached"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run build && git add . && lint-staged"
    }
  }

4.创建环境基础文件 env_base.js（勿动）

// 环境变量，勿动
export default CUR_ENV;

5.rollup.config.js 配置文件

import replace from '@rollup/plugin-replace';
export default {
  input: 'env_base.js',
  output: {
    file: 'env.js',
  },
  plugins: [
    replace({
      include: 'env_base.js',
      exclude: 'node_modules/**',
      CUR_ENV: JSON.stringify(process.env.NODE_ENV), //注入环境变量
    }),
  ],
};

6.npm run dev / build，生成env.js

7.业务代码引入 env.js，获取到注入的环境变量，从而区分环境

方案二：node

• 方案一：需要额外创建一个基础文件env_base.js，同时还需要集成 rollup，对于轻量级应用，这样不好！
• 方案二：利用node基础能力，直接生成当前环境变量文件 env.js，去除rollup框架，降低技术移植成本

1.环境切换命令

"scripts": {
    "dev": "NODE_ENV=dev node ./set-env.js",
    "build": "NODE_ENV=prod node ./set-env.js"
},

2.git commit时，自动切换回build环境

"lint-staged": {
    "**/*.(js)": [
      "pretty-quick --staged",
      "eslint --ext .js",
      "git add"
    ],
    "run/*": [
      "git rm --cached"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run build && git add . && lint-staged"
    }
  }

3.切换脚本（set-env.js）

// 切换环境
const { createWriteStream } = require('fs');
const { resolve } = require('path');
// 当前环境变量
const CUR_ENV = process.env.NODE_ENV || 'prod';
// 要写入的内容
const content = `const CUR_ENV = '${CUR_ENV}';
export default CUR_ENV;
`;
// 创建流
const fileName = resolve(__dirname, './env.js');
const ws = createWriteStream(fileName, {
  encoding: 'utf8',
  autoClose: true,
});
ws.on('open', function () {
  console.log(`正在设置环境变量....`);
});
ws.on('finish', function () {
  console.log(`设置环境变量成功: ${CUR_ENV || '线上环境'}`);
  process.exit();
});
ws.on('error', function () {
  process.exit(1);
});
ws.write(content);
ws.end();

4.npm run dev/build，生成 env.js 文件，并导出环境变量

const CUR_ENV = 'dev';// 'prod'，
export default CUR_ENV;

5.业务代码引入 env.js，获取到注入的环境变量，从而区分环境