前言
习惯用webpack对项目开发工程化，接触小程序后，稍微有点不适应，市面上有taro等优秀的小程序框架可以使用，由于负责项目历史背景，而无法大规模改造，因此只能做一些简单的工程化方案
规范代码
- 配置eslint
- vscode 安装插件 eslint
- 配置husky，利用git commit 钩子进行 eslint检查，检测不通过不能提交代码
1.package.json
代码语言：javascript复制"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
代码语言：javascript复制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检查
代码语言：javascript复制{
"files.associations": {
"*.wxml": "xml",
},
"eslint.enable": true,
"eslint.options": {
"extensions": [".js"]
},
"eslint.validate": ["javascript"],
"eslint.run": "onSave"
}
格式化代码-prettier
1.安装 prettier、pretty-quick 及 配置 .prettierrc
代码语言：javascript复制{
"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，保存时，自动格式化
代码语言：javascript复制{
"editor.formatOnSave": true
}
单元测试 - Jest
1.安装 jest、@babel/core、@babel/preset-env、babel-jest
2.配置package.json
代码语言：javascript复制"scripts": {
"test": "jest ./test/index.test.js --coverage"
}
3.编辑 .babelrc
代码语言：javascript复制{
"presets": ["@babel/preset-env"]
}
4.创建 test 测试文件夹
- 创建 index.test.js
require('./unit/xxx.test.js');
5.编写测试脚本
代码语言：javascript复制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
代码语言：javascript复制"scripts": {
"dev": "rollup -c --environment NODE_ENV:dev",
"build": "rollup -c --environment NODE_ENV:prod",
}
3.git commit时，自动切换回build环境
代码语言：javascript复制"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（勿动）
代码语言：javascript复制// 环境变量，勿动
export default CUR_ENV;
5.rollup.config.js 配置文件
代码语言：javascript复制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.环境切换命令
代码语言：javascript复制"scripts": {
"dev": "NODE_ENV=dev node ./set-env.js",
"build": "NODE_ENV=prod node ./set-env.js"
},
2.git commit时，自动切换回build环境
代码语言：javascript复制"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）
代码语言：javascript复制// 切换环境
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 文件，并导出环境变量
代码语言：javascript复制const CUR_ENV = 'dev';// 'prod'，
export default CUR_ENV;
5.业务代码引入 env.js，获取到注入的环境变量，从而区分环境
