前言
习惯用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,获取到注入的环境变量,从而区分环境