Node CLI如何構(gòu)建微信小程序腳手架

這篇文章將為大家詳細(xì)講解有關(guān)Node CLI如何構(gòu)建微信小程序腳手架，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

具體如下：

目的

由于目前公司的 TOC 產(chǎn)品只要是微信小程序，而且隨著業(yè)務(wù)的擴(kuò)展, 會(huì)有更多的需求，創(chuàng)建更多的小程序，為了讓團(tuán)隊(duì)避免每次開發(fā)前花費(fèi)大量時(shí)間做比如工程化的一些配置，以及保持每個(gè)項(xiàng)目的一致性, 所以決定做一個(gè) Node CLI 來(lái)創(chuàng)建微信小程序腳手架

• 節(jié)省開發(fā)前期的大量時(shí)間，新項(xiàng)目可以很快開始業(yè)務(wù)開發(fā)

• 保證項(xiàng)目統(tǒng)一性，有利于團(tuán)隊(duì)間的協(xié)作及工程化

• 提升團(tuán)隊(duì)基建意識(shí)，從枯燥無(wú)味的業(yè)務(wù)開發(fā)中脫離出來(lái)，嘗試新的東西，即使很基礎(chǔ)很簡(jiǎn)單

小程序選型

小程序的第三方框架有很多, 我接觸過(guò)的就有 taro / wepy / mpvue ，并且都有對(duì)應(yīng)上線的項(xiàng)目。 在嘗試這些框架的過(guò)程中，對(duì)比原生小程序，有一些感想想分享出來(lái)：

• 第三方框架語(yǔ)法貼近vue/react, 開發(fā)者可以根據(jù)自己的特點(diǎn)選擇框架，學(xué)習(xí)成本相對(duì)較低

• 原生框架在CSS預(yù)處理，多端復(fù)用，狀態(tài)管理，自動(dòng)構(gòu)建這幾塊能力對(duì)比其他框架是欠缺的

• 第三方框架額外的工具包會(huì)使打包體積變大，每次構(gòu)建花費(fèi)時(shí)間，同時(shí)性能不如原生

• 第三方框架更新迭代很快，比如wepy@1.x/wepy@2, 導(dǎo)致舊項(xiàng)目的更新問(wèn)題

• 小程序的特性更新迭代速度較快， 第三方框架會(huì)相對(duì)滯后

綜上所述，由于我們目前沒(méi)有多端復(fù)用的要求，并且有的小程序相對(duì)簡(jiǎn)單，需要很短時(shí)間內(nèi)開發(fā)完成， 最重要的是，其他的框架我都試過(guò)了，原生的還沒(méi)寫過(guò)，一個(gè)字，新鮮感?。?smile: ，所以最終當(dāng)仁不讓地選擇了原生小程序，不得不說(shuō)，原生大法就是妙??！ :clap::clap::clap::clap:

大體思路

這個(gè)功能是相對(duì)很基礎(chǔ)的，但是作為一個(gè)每天搬磚的業(yè)務(wù)仔來(lái)說(shuō)，是個(gè)艱難的過(guò)程，也是個(gè)很好的學(xué)習(xí)機(jī)會(huì)。

在做之前，想找找個(gè)社區(qū)比較:ox::beer:的學(xué)習(xí)(抄)一下，短暫考慮后，果斷選擇 taro-cli , 然后火速打開源碼，一頓操作(完全蒙圈)，學(xué)習(xí)了一點(diǎn)之后，才開始上手

這個(gè)具體的實(shí)現(xiàn)思路我想到兩個(gè)

• git clone 遠(yuǎn)程倉(cāng)庫(kù)作為模版下載到本地，再根據(jù)用戶輸入配置修改 .json 文件(比如 appId )

• template 就放在當(dāng)前目錄中，直接`copy``, 之后的事等同

權(quán)衡之后，打算使用 lerna 作為管理工具, 其中模版也作為一個(gè) npm 包 ，用到的時(shí)候去 npm 下載，這么做我是為了方便管理，統(tǒng)一 push / publish , 就是為了省事 :smile:。

最終思路:

暴露命令 —> 用戶交互輸入配置 -> 集合配置下載模版 -> 根據(jù)配置修改 .json -> git init + 安裝依賴

開發(fā) Node CLI

Lerna 項(xiàng)目搭建

知道 monorepo 的同學(xué)不需要我多說(shuō)，其實(shí)就是把代碼放在一個(gè)倉(cāng)庫(kù)里，結(jié)果包之間回想以來(lái)，發(fā)布繁瑣等問(wèn)題， 這里我們就用到了 lerna 這個(gè)神器幫助我們做包的統(tǒng)一管理

// 創(chuàng)建項(xiàng)目
mkdir modoo-mini-program
cd modoo-mini-program

// 初始化
lerna init

cd packages
mkdir modoo-script
mkdir modoo-template-mini
mkdir modoo-mini // 安裝 modoo-script 依賴用于測(cè)試，無(wú)其他實(shí)際用處

lerna bootstrap // 安裝依賴 + npm link

安裝依賴

為了實(shí)現(xiàn)功能，我們需要安裝一些依賴包

• commander 命令行工具，用于讀取命令參數(shù)，作對(duì)應(yīng)操作

• node-fs-extra 在 Node.js 的 fs 基礎(chǔ)上增加了一些新的方法，更好用，還可以拷貝模板。

• chalk 可以用于控制終端輸出字符串的樣式, 調(diào)整顏色啥的

• inquirer 用戶命令行交互，獲取用戶的交互配置數(shù)據(jù)，就像個(gè)提問(wèn)板

• ora 實(shí)現(xiàn)加載中的狀態(tài)是一個(gè) Loading 加前面轉(zhuǎn)起來(lái)的小圈圈，成功了是一個(gè) Success 加前面一個(gè)小鉤鉤。

• log-symbols 日志彩色符號(hào)，用來(lái)顯示√ 或 × 等的圖標(biāo)

獲取命令

首先第一步，要在用戶全局安裝之后，暴露出命令接口，需要在 packages.json 文件中加入如下內(nèi)容

"bin": {
  "modoo-script": "./bin/modoo-script.js"
},

之后在根目錄下創(chuàng)建 bin 文件夾 + bin/modoo-script.js

#!/usr/bin/env node
const { program } = require("commander");

program
 .version(require("../package").version) // modoo-script --version
 .usage("<command> [options]")
 // init 命令，床架項(xiàng)目
 .command("init [projectName]", "Init a project with default templete")
 .parse(process.argv); // 解析命令參數(shù)

然后需要注意的是， commander 支持 Git 風(fēng)格的子命令處理，可以根據(jù)子命令自動(dòng)引導(dǎo)到以特定格式命名的命令執(zhí)行文件，文件名的格式是 [command]-[subcommand] ，例如：

modoo-script init => modoo-script-init
modoo-script build => modoo-script-build

所以為了實(shí)現(xiàn) init 命令，可以直接在 bin 文件目錄下添加 modoo-script-init.js

#!/usr/bin/env node

const { program } = require("commander");

program
 .option("--name [name]", "項(xiàng)目名稱")
 .option("--description [description]", "項(xiàng)目介紹")
 .option("--framework", "腳手架框架")
 .parse(process.argv);

const args = program.args;
// 獲取命令參數(shù)
const { name, description, framework } = program;

const projectName = args[0] || name;

......

用戶交互

獲取了命令參數(shù)后，根據(jù)參數(shù)轉(zhuǎn)到用戶交互界面，這里使用的是 inquirer 來(lái)處理命令行交互, 用法很簡(jiǎn)單

const inquirer = require('inquirer')

if (typeof conf.description !== 'string') {
   prompts.push({
    type: 'input',
    name: 'description',
    message: '請(qǐng)輸入項(xiàng)目介紹！'
   })
}

......

inquirer.prompt(prompts).then(answers => {
  // 整合配置
  this.conf = Object.assign(this.conf, answers);
})

遠(yuǎn)程模塊

這里較為折騰，一開始說(shuō)了，我把模版作為 npm包 ，具體查找，下載的過(guò)程如下

• npm search 查找相應(yīng)的模版 npm 包

• 在用戶選擇框架后對(duì)應(yīng)所需的包，獲取它的詳細(xì)信息，主要是 tarball

• 用戶輸入完后，下載 tarball 到項(xiàng)目目錄，并修改 .json 文件配置

部分代碼如圖所示

// 一 npm search 查找相應(yīng)的模版 npm 包
const { execSync } = require("child_process");

module.exports = () => {
 let list = [];
 try {
  const listJSON = execSync(
   "npm search --json --registry http://registry.npmjs.org/ @modoo/modoo-template"
  );
  list = JSON.parse(listJSON);
 } catch (error) {}

 return Promise.resolve(list);
};

// 二 返回 npm 數(shù)據(jù)
const pkg = require("package-json");
const chalk = require("chalk");
const logSymbols = require("log-symbols");

exports.getBoilerplateMeta = framework => {
 log(
  logSymbols.info,
  chalk.cyan(`您已選擇 ${framework} 遠(yuǎn)程模版, 正在查詢?cè)撃０?..`)
 );

 return pkg(framework, {
  fullMetadata: true
 }).then(metadata => {
  const {
   dist: { tarball },
   version,
   name,
   keywords
  } = metadata;
  log(
   logSymbols.success,
   chalk.green(`已為您找到 ${framework} 遠(yuǎn)程模版, 請(qǐng)輸入配置信息`)
  );

  return {
   tarball,
   version,
   keywords,
   name
  };
 });
};

// 三 下載 npm 包
const got = require("got");
const tar = require("tar");
const ora = require("ora");

const spinner = ora(
  chalk.cyan(`正在下載 ${framework} 遠(yuǎn)程模板倉(cāng)庫(kù)...`)
).start();

const stream = await got.stream(tarball);

fs.mkdirSync(proPath);

const tarOpts = {
 strip: 1,
 C: proPath
};

// 管道流傳輸下載文件到當(dāng)前目錄
stream.pipe(tar.x(tarOpts)).on("close", () => {
  spinner.succeed(chalk.green("下載遠(yuǎn)程模塊完成！"));
  ......
})

// 四 遍歷文件修改配置
const fs = require("fs-extra");

readFiles(
  proPath,
  {
   ignore: [
    ".{pandora,git,idea,vscode,DS_Store}/**/*",
    "{scripts,dist,node_modules}/**/*",
    "**/*.{png,jpg,jpeg,gif,bmp,webp}"
   ],
   gitignore: true
  },
  ({ path, content }) => {
   fs.createWriteStream(path).end(template(content, inject));
  }
 );
 
// 遞歸讀文件
exports.readFiles = (dir, options, done) => {
 if (!fs.existsSync(dir)) {
  throw new Error(`The file ${dir} does not exist.`);
 }
 if (typeof options === "function") {
  done = options;
  options = {};
 }
 options = Object.assign(
  {},
  {
   cwd: dir,
   dot: true,
   absolute: true,
   onlyFiles: true
  },
  options
 );

 const files = globby.sync("**/**", options);
 files.forEach(file => {
  done({
   path: file,
   content: fs.readFileSync(file, { encoding: "utf8" })
  });
 });
};

// 配置替換
exports.template = (content = "", inject) => {
 return content.replace(/@{([^}]+)}/gi, (m, key) => {
  return inject[key.trim()];
 });
};

下載依賴

下載完畢并且修改完配置后, 默認(rèn)執(zhí)行 git init + 根據(jù)環(huán)境( yarn / npm / cnpm )安裝依賴，這個(gè)就很簡(jiǎn)單了

const { exec } = require("child_process");
const ora = require("ora");
const chalk = require("chalk");

// proPath 項(xiàng)目目錄
process.chdir(proPath);

// git init
const gitInitSpinner = ora(
 `cd ${chalk.cyan.bold(projectName)}, 執(zhí)行 ${chalk.cyan.bold("git init")}`
).start();

const gitInit = exec("git init");
gitInit.on("close", code => {
 if (code === 0) {
  gitInitSpinner.color = "green";
  gitInitSpinner.succeed(gitInit.stdout.read());
 } else {
  gitInitSpinner.color = "red";
  gitInitSpinner.fail(gitInit.stderr.read());
 }
});

// install
let command = "";
if (shouldUseYarn()) {
 command = "yarn";
} else if (shouldUseCnpm()) {
 command = "cnpm install";
} else {
 command = "npm install";
}

log(" ".padEnd(2, "\n"));
const installSpinner = ora(
 `執(zhí)行安裝項(xiàng)目依賴 ${chalk.cyan.bold(command)}, 需要一會(huì)兒...`
).start();

exec(command, (error, stdout, stderr) => {
  if (error) {
   installSpinner.color = "red";
   installSpinner.fail(chalk.red("安裝項(xiàng)目依賴失敗，請(qǐng)自行重新安裝！"));
   console.log(error);
  } else {
   installSpinner.color = "green";
   installSpinner.succeed("安裝成功");
   log(`${stderr}${stdout}`);
  }
});

主要的代碼就是這些，其實(shí)只要知道思路，這些東西都很簡(jiǎn)單，雖然我寫的有點(diǎn) ?:chicken:，但是主要的邏輯還是能理清楚的一些的。更加詳細(xì)的可以去:eyes:我發(fā)的源碼，多謝指教。:pray::pray::pray:

開發(fā)腳手架

因?yàn)檫@是小程序的腳手架，它不像其他 web 框架一樣需要很多 webpack 的配置，所以相對(duì)簡(jiǎn)單很多。

對(duì)于這個(gè)腳手架，相比于開發(fā)者工具創(chuàng)建的默認(rèn)項(xiàng)目，我彌補(bǔ)了它的一些問(wèn)題

1. 默認(rèn)項(xiàng)目太過(guò)簡(jiǎn)單，只適合自己折騰，對(duì)于團(tuán)隊(duì)或者企業(yè)，缺乏相應(yīng)的代碼約定/規(guī)范，沒(méi)有強(qiáng)制的約定會(huì)導(dǎo)致團(tuán)隊(duì)協(xié)作間的困難，提升code review的難度，所以我在原來(lái)的基礎(chǔ)上加入了eslint,stylelint,prettier,commitlint等配置，以及git hook 在 pre-commit 時(shí)，執(zhí)行校驗(yàn)，確保提交的代碼盡量規(guī)范

2. 由于對(duì) css 預(yù)處理的鐘愛，另外加入了對(duì) less 的支持，并且解決小程序背景圖不支持本地圖片的問(wèn)題

3. 由于以上基本都是文件處理，所以選擇 gulp 作為構(gòu)建工具，這里是 v4, 與v3 寫法上有一定的區(qū)別，不過(guò)關(guān)系不大

在根目錄下創(chuàng)建 gulpfile.js

const gulp = require('gulp');
const chalk = require('chalk');
const rename = require('gulp-rename');

// 支持 less
gulp.task('less', () => {
 return gulp
  .src('./miniprogram/**/*.less')
  .pipe(less())
  .pipe(postcss()) // 配置在 post.config.js
  .pipe(
   rename((path) => {
    path.extname = '.wxss';
   })
  )
  .pipe(
   gulp.dest((file) => {
    return file.base; // 原目錄
   })
  );
});

// 開發(fā)環(huán)境監(jiān)聽 less
if (env === 'development') {
 gulp.watch(['./miniprogram/**/*.less'], gulp.series('less')).on('change', (path) => {
  log(chalk.greenBright(`File ${path} was changed`));
 });
}


// 一下代碼注釋掉了，依賴包下載太慢了，這主要負(fù)責(zé)圖片的壓縮
const imagemin = require('gulp-imagemin');
const cache = require('gulp-cache'); // 使用緩存

gulp.task('miniimage', () => {
 return gulp
  .src('./miniprogram/**/*.{png,jpe?g,gif,svg}')
  .pipe(
   cache(
    imagemin([
     imagemin.gifsicle({ interlaced: true }),
     imagemin.mozjpeg({ quality: 75, progressive: true }),
     imagemin.optipng({ optimizationLevel: 5 }),
     imagemin.svgo({
      plugins: [{ removeViewBox: true }, { cleanupIDs: false }],
     }),
    ])
   )
  )
  .pipe(
   gulp.dest((file) => {
    return file.base; // 原目錄
   })
  );
});

關(guān)于“Node CLI如何構(gòu)建微信小程序腳手架”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。