• lerna 大前端项目代码重用解决方案


    在 react 或者 vue 项目里面,目前来说代码或者组件的复用,一般采用三种方式。

    1、自己手动配置 webpack ,使用 HtmlWebpackPlugin 构建多个入口项目,共享一些代码组件。

      缺点:需要对 webpack 掌握较好,多个 HtmlWebpackPlugin 导致热更新 打包变慢  。

      优点:可控性高。

    2、使用 npm 公共的库。

      缺点:不能实时修改,对于一些业务相关的重复代码,可能需要频繁修改。

      优点:分离的很彻底 ,独立维护,随处可用

    3、使用 lerna 工具

      缺点: 项目的git 权限控制比较麻烦

      优点:  实时修改。

    这里主要介绍 lerna 的使用:

    一、安装

    npm i lerna  -g
    

      

    二、初始化

      新建一个文件夹: lerna_demo,进入

    lerna init
    

      

    三、导入项目

    lerna import 你本地的项目路径
    

    例如: 在我本地的电脑的 f 盘有个旧的 react 项目

     如果没有,可以新建几个项目如下:

    	 npx create-react-app admin --template typescript
    	 npx create-react-app web --template typescript
    	 npx create-react-app common --template typescript
    

      

      

    最后就是这几个文件:

    在 lerna_demo 里面,导入几个项目:

    lerna import F:admin
    lerna import F:web
    lerna import F:common
    

      

    四、结果

      在 lerna_demo/packages 里面,就会多出几个工程

      

    四、可能的错误

      1、项目在导入的时候,会合并 git 的提交记录,所以项目的代码要都提交了的。如果有修改可以执行:  

      

    git add .  
    
    git commit -m "合并"
    

      

    五、使用 yarn 

      

     

    lerna.json

    {
      "packages": [
        "packages/*"
      ],
      "version": "0.0.0",
      "npmClient": "yarn",
      "useWorkspaces": true,
      "command": { 
        "publish": { 
            "ignoreChanges": [ 
                ".gitignore",
                "*.log",
                "*.md"
            ]
        },
        "bootstrap": { 
            "ignore": "npm-*", 
            "npmClientArgs": [ 
                "--no-package-lock"
            ]
        }
    }
    }
    

      

      

    package.json

    {
      "name": "root",
      "private": true,
      "devDependencies": {
        "lerna": "^4.0.0"
      },
      "workspaces": [
        "packages/*"
      ],
      "scripts": {
        "bootstrap": "lerna bootstrap && lerna link",
        "clean": "lerna clean --yes",
        "all-dev": "lerna run start",
        "all-build": "lerna run build",
        "admin": "lerna run start --scope=admin --stream",
        "web": "lerna run start --scope=web --stream",
        "test": "lerna run test --stream"
      }
    }

    六、修改lerna ->  common 里面的 package.json

    同时也在 admin->package.json 里面加入 依赖,当然也可以不加。

    七、在common 里面加入代码:

      

      

      在 admin 里面使用:

      

     八、运行指令安装模块

      

    yarn bootstrap
    

      

    九、运行 admin 项目

     

    yarn admin
    

      

    十、参考文档:

      https://segmentfault.com/a/1190000023160081

      https://github.com/lerna/lerna#getting-started

  • 相关阅读:
    poj 3096 Surprising Strings (set)
    hdu 4038 stone
    STL set 使用总结
    poj 3185 The Water Bowls (bfs 加未压缩)
    QPixmap显示图片
    addStretch的作用 .
    Qt SizeHint()
    StyleSheet
    linux编程守护进程编写
    Qt样式表的使用
  • 原文地址:https://www.cnblogs.com/muamaker/p/14831912.html
Copyright © 2020-2023  润新知