项目工程化-其他配置文件
项目中的配置文件太多了，除了规范性的配置文件，还有一些其他的配置文件 .node-version在项目根目录创建文件.node-version, 这个文件就是固定node版本的，代码如下： 12# .node-version18 当项目 A 我设置之后, 如果电脑安装的有18的版本，打开编辑器之后终端会显示Using Node v18.18.0， 如果没有，那么会显示Can't find an installed Node version matching v18.x.x. Do you want to install it? answer [y/N]: 你可以输入y进行安装，当然也可以退出，使用当前的node版本运行项目； .npmrc设置的是npm的相关配置 123456# 设置install 源registry=https://registry.npmmirror.com/# 设置为 true 时，会提升（hoist）某些依赖到更高层级，以优化依赖树结构。shamefully-hoist=true# 设置为 false 时，表示放宽对 peer...
项目工程化-prettier
prettierPrettier 是一个固执己见的代码格式化程序 一般通过以下方式使用 prettier 使用 vscode 等代码编辑器的 prettier 插件：搭配快捷键如 ctrl+s，保存时自动格式化，配置简单，使用方便，但是缺点是由于团队成员可能使用不同的编辑器，prettier 版本、配置不同，从而格式化的风格迥异且难统一。所以这种使用方式个人使用没问题，团队推广不太适合 下载 prettier npm 包，在项目中配置好，统一格式化风格 使用prettier的使用很简单, 我拿vscode举例： 需要下载编辑器插件, 这样在在完成之后会在全局settings.json中配置，不论编写html, css...
Vue项目管理
初始化项目::: code-group [npm]1npm create vite@latest [Yarn]1yarn create vite [PNPM]1pnpm create vite [bun]1bun create vite 不管用什么方式都可以安装, 不过要注意的是使用bun安装需要先看下官网 Bun 举个例子: 项目名称为你的项目名字, 如: vue-project 选择项目类型为vue 选择TypeScript进行开发, 其它的不用选择即可; 不用去默认选择Eslint, 因为这里使用的是高版本的Eslint（9.0.0）和默认安装的Eslint（8.x.x）的语法有冲突； 代码规范EditorConfig::: tipEditorConfig 的作用是在多个编辑器和 IDE 之间维护一致的代码风格。::: 如果使用Vscode进行开发的话, 那就要安装EditorConfig for VS Code插件, 然后在根目录下创建.editorconfig文件, 内容如下: 1234567891011# Editor...
技术调研-github-pacakges
背景前端时间在开发个人项目过程中, 将一些工具包拆除去，以依赖的形式引入functional-helpers 这样就直接在项目中package.json中配置就好了；关于如何配置请看sim-admin-package.json 但是个人觉得不是很合适，为什么这么说呢，就是开发一个工具库，然后打包，将构建的产物分发到另外一个开源的存储库中，这样不是很智能；所以不合适； 然后今天是试了一下github packages，就是不需要上传到npm, 只需要上传到github package同样也可以使用； 如何做？修改配置首先，你需要申请token， 如下图所示： 申请成功之后不要刷新页面，因为刷新了页面token就没了，token的格式如ghp_xxxxxxx; 还需要设置全局的.npmrc， 1//npm.pkg.github.com/:_authToken=ghp_xxxxxxx 其次，需要修改项目配置pacakge.json： 123456{ "name":...
技术调研-nvm1.1.12版本的一个问题
背景最近没有时间更新网站，是在开发一个桌面端的应用工具；桌面端的工具使用 Node+vue 开发的，但是在使用 node+nvm 的时候会有下面的一种情况； 因为nvm的版本在github的版本为1.1.12也是最新版本的；但是在最新版本的使用的时候，会报错； 1234567const { exec, spawn } = require("chaild_process");const process = exec("nvm ls", { shell: "cmd" });// orspawn("nvm", ["ls"], { shell: "cmd" }); 这一段代码就是就是通过node操作nvm，但针对于1.1.11版本是可行的，但是1.1.12会提示NVM for Windows should be run from a terminal such as CMD or...
技术调研-nvm 替换为 fnm
背景昨天在逛node 官网的时候，发现下载页面多了一fnm的包管理器； 于是，我开始研究一下。 发现它与 nvm 相似，但是它同时支持 node 的 arm 平台。也可以说是跨端的。不过它是rust开发的，性能得到进一步提升 官网介绍 🌎 跨平台支持（macOS、Windows、Linux） ✨ 单文件，轻松安装，即时启动 🚀 以速度为中心 📂 适用于.node-version 和.nvmrc 文件 🚀 快速、简单的 Node.js 版本管理器，采用 Rust 构建 使用macOS/Linux对于 bash、zsh 和 fishshell，有一个自动安装脚本。 首先确保 curl 和 unzip 已安装在您的操作系统上。然后执行： 1curl -fsSL https://fnm.vercel.app/install | bash 不过我在用macos安装的时候老是拉去不下来，也不清楚是什么问题；我在想既然通过命令自动安装不行，那么就通过 Homebrew 手动安装吧； Homebrew 官网 github 安装成功之后 -v...
技术调研-rust-env没有继承问题
介绍近期在开发rust + vite(tauri)项目的时候，发现了一个问题；就是沙箱隔离模式的环境变量继承问题； 在rust本地开发中，可以通过std::env::var("PATH")或者全局变量$PATH获取环境变量的值，当然您也可以通过std::env::vars()获取所有的全局变量； 当然在开发环境中是可以获取到的，但是在build之后，rust编译器会自动将PATH环境变量设置为/usr/bin，所以无法获取到全局变量； 所以当您运行环境变量的某个命令时，是不会执行的； 因为在您的应用程序中%PATH中根本获取不到对应的变量； 案例我在本地电脑安装了fnm，在dev之后是可以获取到where fnm命令的，如下代码： 1234567891011121314151617181920212223242526272829fn is_installed(program: &str) -> bool { let mut cmd = Command::new(if cfg!(target_os =...
技术调研-远程组件的介绍
背景近期我在做什么？ 远程组件如何引入在项目中这个话题也就是我最近在研究的东西； 为什么？最近有一个想法，就是在工作中有那么一个功能就是商品属性， 类似于淘宝京东的选择商品规格的功能, 有尺寸大小，有眼色，有材质等等； 该功能涉及到多个平台，每个属性有对应的规则，但是有一个比较麻烦的点就是功能是一致的，规则是一样的，就是完全的功能要在不同的项目中复制粘贴修改；导致现在就是不同的项目中都有一样的组件一样的代码 这样就暴露出了弊端： 维护多个平台，比如修改了规则，那么就要修改多个项目；pc 端, h5, 小程序等等; 代码的重复性比较高，对于高复杂的组件没有对应的文档以及说明； 底层的变动以及参数不统一，A 同学加个一个参数 a, B 加了一个 b，最后都不知道该字段的具体作用 在这样的业务场景下，于是我消费一些时间去研究一下远程组件如何做？ 当然远程组件的好处就是：后期维护这个组件即可； 于是，就考虑到了俩种不同的处理方式 包依赖模式，有一个缺点就是如果远程组件更新了，那么本地以及生产的package.json也要对应进行升级；不过稳定性比较高 cdn 模式，那就是项目使用...
技术调研-远程组件实践
背景前端时间总结了开发远程组件的介绍，其实也不算是远程组件, 就是通过install的形式进行安装依赖； 虽然通过拆分组件或者方法，通过install(不论公开还是私有)都是可以的，但是最近在新的项目中使用还是发现了一些问题； 使用npm, yarn出现一些依赖性问题: 版本冲突，打包问题等等; yarn peerDependencies 不生效，只有使用npm是可以的；因为项目中有autoimport.d.ts等文件，那么使用npm会导致依赖性重复写入autoimport.d.ts的警告； 使用pnpm安装可以避免这些问题，但前提是服务器上有pnpm 原型图 涉及项目的地址为： sim-admin 实践方向近期在整理实现技术上，发现了俩个方法： vite-lib 插件模式 + fetch 加载异步组件就是将你编写好的组件，通过vite-lib的形式，将其打包成工具插件；代码如下： 123456789101112131415161718192021222324252627export default defineConfig({ plugins:...
技术调研-浅谈跨端技术的局限性
背景作为前端程序员， 如果给你一个 APP 让你去做， 你会怎么做呢？如不限于技术层次，优先想到的就是 Android 原生系统， 但是面对 Android 前端程序员无法上手以及去学习，单纯的想要从 Web 层次去想技术方案；无非就是市场上的几种方案，h5, uni-app, React-Nativ, Flutter; 单做过 H5 移动端混合开发的都清楚， H5 的页面或者纯 H5 开发 APP，也是可以开发的， 但是最后使用人数并不理想， 达不到一个原生流畅的效果；而 React-Native 对前端来说也许是一个优选的方案，使用效果以及框架基本上都是前端技术，熟悉 react 并且上手是很快的； 但如果功能较为复杂， React-Native 也会有一定的影响；但效果明显比 H5 流程的很多； 对于 Flutter 来讲呢，技术层面在国内并不热门，也有不少大厂也会选择 Flutter 作为开发 App 的首选； 但是学习成本是比较高的，对前端程序员来讲，可能会有点陌生甚至不熟悉；作为 dart 语法的 flutter...