zoukankan      html  css  js  c++  java
  • vue+webpack多个项目共用组件动态打包单个项目

    原文复制:https://www.jianshu.com/p/fa19a07b1496

    修改了一些东西,因为sh脚本不能再window电脑执行,所以改成了node脚本。这是基于vue-cli2.0配置的,3.0的也是同样的道理。
    我现在的项目改成vue-cli3.0的了,实现了一个工程多项目共用一些资源,但是打包的时候只打包一个项目,并且每个项目也可以配置多页面,并且实现了自动化上传到测试服务器(生产没权限)和静态资源分离,一行命令就可以打包项目并且把静态资源上传到一个服务器,而html文件上传到另一个服务器。欢迎一起交流学习。

    1.最终实现结果

    先看下目录结构

    projectA,projectB,projectC是三个业务上没有关系的三个项目,但是可以共用一些公用的组件、公用工具类、公用样式等。
    要实现npm run dev/build projectA 编译打包的时候,只编译打包项目projectA,而projectB和projectC不会编译打包进来。
    实现npm run dev/build + 项目名字编译打包对应的项目

    2.为什么这么做

    以下是结合自己公司的业务场景进行摸索的
    公司经常会有一些活动,为了配合活动开发人员需要开发一些h5页面来配合活动,刚开始活动不多,所有活动页面都放在一个项目目录下,webpack共用一个固定打包入口,对路由(vue-router)和状态管理(vuex)进行模块划分,不同的活动页面通过不同的路由路径来加载。
    随着活动项目增多,页面也越来越多,问题就就出现了,比如打包projectA,webpack也会把projectB,projectC打包进来,因为SPA应用是一次性下载所有资源文件,这就造成访问projectA或者projectB或者projectC的时候会变得慢,因为把一些不相干的代码也下载下来了。
    有人会说每有一个项目vue init另起一个工程目录,但是这样每次都要复制一下工具类等公用代码,每次都要配置下环境,有的活动也就一两个页面另起一个工程没必要。

    3.走的弯路

    一开始我想通过webpack的一些配置,当打包projectA的时候,把projectB和projectC目录排除在外,后来这条路没走通,就放弃了。

    4.实现

    分两个步骤
    第一是怎样当npm run dev/build + 项目名字的时候让webpack知道你想打包哪个项目
    第二是根据项目名称来动态更改一些webpack配置

    第一

    在config目录下新建两个脚本文件

     
    WechatIMG1481.jpeg

    脚本内容
    build.js

    // 下面这行代码
    // 拿到命令行里参数,比如执行(npm run b projectA),这个时候projectName就等于projectA
    // 有了这个变量,就可以根据这个名字来读取projectConfig里面的配置了
    let projectName = process.argv[2]
    
    // 下面两行代码 获取projectName后把保存起来,写入到project.js里,方便其它js文件里引入使用
    let fs = require('fs')
    fs.writeFileSync('./config/project.js', `exports.name = '${projectName}'`)
    
    // 下面两行代码继续执行命令(npm run build),执行默认命令开始进行打包
    let exec = require('child_process').execSync;
    exec('npm run build', {stdio: 'inherit'});
    

    dev.js

    let projectName = process.argv[2]
    let fs = require('fs')
    
    fs.writeFileSync('./config/project.js', `exports.name = '${projectName}'`)
    
    let exec = require('child_process').execSync;
    exec('npm run dev', {stdio: 'inherit'});
    

    在config目录下新建 project.js文件


     
    image.png

    内容就一行代码

    exports.name = 'ProjectA'
    

    修改package.json

      "scripts": {
        "d": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "b": "node build/build.js",
        "dev": "node config/dev.js",
        "build": "node config/build.js"
      },
    

    到此第一步就完成了
    以打projectA生产包为例
    当执行npm run build projectA的时候,会执行build.js脚本,并把projectA传给脚本let projectName = process.argv[2]拿到项目名称,
    fs.writeFileSync('./config/project.js', `exports.name = '${projectName}'`)写入到project.js文件里
    这就达到了动态获取你想要打包的项目名称的目的,有了这个环境变量,就可以根据项目的需要来修改webpack的配置了。

    let exec = require('child_process').execSync;
    exec('npm run build', {stdio: 'inherit'});
    

    继续执行打包流程。

    第二

    至于webpack配置,可以通过修改HtmlWebpackPlugin的template和修改打包入口路径来动态打包。
    首先为每个项目单独新建入口和渲染模板


     
    image.png

    每个项目的webpack配置可能有很多不同,所有我建了一个projectConfig.js专门来处理


     
    image.png

    projectConfig.js内容

    const projectName = require('./project')
    
    const config = {
      //活动1
      projectA:{
        localPath:'./src/projects/projectA/',
        uploadPath:'/h5/test/cb/',
      },
      //活动2
      projectB:{
        localPath:'./src/projects/projectB/',
        uploadPath:'/h5/act/tf/',
      },
      //活动3
      projectC:{
        localPath:'./src/projects/projectC/',
        uploadPath:'/h5/test/tf/',
      }
    }
    
    const configObj = config[projectName.name]
    module.exports = configObj
    

    这里是根据项目要打包的项目名称获取一些webpack打包配置
    还是以打projectA生产包为例,即npm run build projectA
    修改渲染模板

     
    image.png

     
    image.png

    修改打包入口
     
    image.png

    至此第二步也完成了
    这样就实现多个项目共用组件并且动态打包单个项目了

    5.demo

    demo地址

  • 相关阅读:
    Android UiAutomator 自动化测试环境搭建---新手1
    python -- 计算数学题--用程序解决问题1
    linux(ubuntu) 遇到的问题 --1
    android--email发送邮件,文本还有附件形式的邮件
    fiddler---使用方法1--抓取手机app包
    appium 学习各种小功能总结--功能有《滑动图片、保存截图、验证元素是否存在、》---新手总结(大牛勿喷,新手互相交流)
    java 显示视频时间--玩的
    appium获取app应用的package和 activity。---新手总结(大牛勿喷,新手互相交流)
    python --appium搭建环境过程 ---新手总结(大牛勿喷,新手互相交流)
    centos6下yslow部署
  • 原文地址:https://www.cnblogs.com/phoebeyue/p/10303739.html
Copyright © 2011-2022 走看看