为团队构建一个脚手架生成工具 - 前端技术分享

vite真的好用，no more ~ update 2022.02

scaffolding - 脚手架

build process | code formatting | linting | testing | type checking
code style - PR中，可以直接关掉，最初加上规则就行，后续不需要花更多时间讨论
https://btholt.github.io/project-fox-game-site/ - 里面有完整构建一个项目的流程，一些抽象出来的概念，可参考
团队基础工程化的建设
模块化
组件化
规范化
自动化

规范

约定

命名

代码风格
符号书写风格（缩进，括号，运算符，空格，空行，引号，逗号，分号）
语法风格（变量命名，逻辑结构，函数签名）
函数参数个数｜行最大字符数｜函数长度｜函数逻辑复杂度｜JS文件长度控制
eslint - devDependencies
scripts里面定义检查范围
.eslintrc.js 设置检查规则
具体可见eslint版本问题博文

自动化

打包

requireJS,seaJS ｜ AMD,CMD规范
nodeJS - 开发环境工具脚本｜代码检查&&文件编译&&依赖管理&&内容打包&&单元测试&&持续集成｜代码可维护性

npm

见npm博文(npm使用指北)

Vue为主的团队
PC+移动
node
electron

1.业务项目
2.核心逻辑业务（UI/utils）
3.node项目
4.electron项目

vue相关项目——业务型
@vue/cli
文档指导型（the standard build toolchain for Vue applications - 2018， evan you）
vite —— 后续探索（webpack本身拖拉机的特质，vite超跑）
node项目

electron项目

cli相关

推荐command line interface guidelines：https://clig.dev/
https://www.npmjs.com/package/meow

haoma

vite

minify

esbuild - minify

https://esbuild.github.io/api/#minify

terser - minify

https://terser.org/docs/api-reference#minify-options

terser vs rebuild

concept

JS库 - 隐藏复杂浏览器差异
JS框架 - 使复杂强大的应用开发过程易于管理

basics

lib - output

匿名函数自调用，函数定义，函数表达式 xx.js => ;(function func() { })(); | (function func() { }()); - 没有差别，括号在里面可以算是分组运算符
Return the result of evaluating Expression. This may be of type Reference
This algorithm does not apply GetValue to the result of evaluating Expression
AST 结果

dotenv

从一个 .env 文件中加载环境变量到 process.env 对象中。

在开发环境中，我们通常需要在应用程序中使用各种敏感信息，例如数据库连接字符串、API 密钥等。
将这些敏感信息直接硬编码到源代码中是不安全的，可能导致泄漏或被恶意攻击者利用。
因此，我们通常会使用环境变量来存储这些信息，并在应用程序中引用它们。

而 dotenv 库则提供了一种更方便的方式来加载环境变量。它可以自动从一个名为 .env 的文件中读取环境变量，并将其添加到 process.env 对象中。
这样，我们就可以以类似于硬编码的方式使用环境变量，同时又能保护这些敏感信息不被泄露或恶意利用。

yaml

https://www.npmjs.com/package/yaml

import { parse } from 'yaml'
const path = require('path');
const fs = require('fs');

export const getEnv = () => {
  return process.env.RUNNING_ENV
}

export const getConfig = () => {
  const environment = getEnv()
  const yamlPath = path.join(process.cwd(), `./.config/.${environment}.yaml`)
  const file = fs.readFileSync(yamlPath, 'utf8')
  const config = parse(file)
  return config
}