pnpm、monorepo分包管理、多包管理、npm、vite、前端工程化、保姆级教程

浅尝pnpm monorepo 多包管理方案

💡tips: 创建pnpm monorope多包管理框架流程

初始化
bash 复制代码
mkdir taurus & cd taurus
pnpm init
创建基础文件
  1. 创建文件pnpm-workspace.yaml
yaml 复制代码
packages:

  - 'packages/**'
  1. 创建文件夹packages/
bash 复制代码
-packages/
-package.json
-pnpm-workspace.yaml
创建子项目
  1. 创建子项目@taurus/three

tips:创建项目时将项目名称设置为目标名称(@taurus/name 方便区分共有包和自定义包,不做强制要求),可查看 packages.json 中的name字段进行验证

bash 复制代码
cd packages
pnpm create vite three --template vue
  1. 创建子项目@taurus/utils
bash 复制代码
cd packages
mkdir utils & cd utils
npm init
  1. 添加子项目引用
bash 复制代码
pnpm add @tautus/utils --filter @taurus/three -wP

添加成功后验证方法

@taurus/three-ts配置引用目录别名 @

  1. 在vite.config.ts中添加 alias

    import { defineConfig } from "vite";
    import vue from "@vitejs/plugin-vue";
    import path from 'path';
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [vue()],
      resolve:{
        alias:{
          "@":path.resolve(__dirname,"src"),
          'components': path.resolve(__dirname, './src/components'), // 设置 'components' 指向 src/components 目录
        }
      }
    });
    
  2. 解决使用nodeAPI时ts报错问题,下载node类型函数

    bash 复制代码
    pnpm add @types/node -wD
  3. 解决文件中使用@引用是的ts报错,在tsconfig.json中设置@别名

    {
      "compilerOptions":{
        "baseUrl": ".", // 这个选项中指定了相对于哪个目录解析别名
        "paths":{
          "@/*": ["src/*"] // 这里设置别名@指向src目录下的文件
         }
      }
    }
    

支持less

pnpm 复制代码
pnpm add less less-loader --filter @taurus/three-ts -w

配置vite.config.ts

typescript 复制代码
{
  ...
  css:{
   preprocessorOptions: {
      less: {
        math: "always", // 括号内才使用数学计算
        globalVars: {
          // 全局变量
          mainColor: "red",
        },
      },
    },
  }
}

组件中使用

<style lang="less" scoped>
  .classA{
    .p1{color:red;}
  }
</style>

接下来开始编写你颠覆时代的代码吧

欢迎各位猿佬留言交流

相关推荐
cwj&xyp1 小时前
Python(二)str、list、tuple、dict、set
前端·python·算法
dlnu20152506221 小时前
ssr实现方案
前端·javascript·ssr
古木20191 小时前
前端面试宝典
前端·面试·职场和发展
轻口味2 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王3 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发3 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀4 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪4 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef6 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端