Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mpvue会支持分包加载吗?? #672

Open
hjdshu opened this issue Jun 22, 2018 · 24 comments
Open

mpvue会支持分包加载吗?? #672

hjdshu opened this issue Jun 22, 2018 · 24 comments

Comments

@hjdshu
Copy link

hjdshu commented Jun 22, 2018

mpvue将来会支持分包加载吗??

微信大力在推分包加载,如果mpvue不打算支持分包加载了,是不是要意味着我们开发者要提前做好用原生重写的打算...

@JLBear
Copy link

JLBear commented Jun 25, 2018

是啊 什么时候开始支持分包加载?

@F-loat
Copy link
Contributor

F-loat commented Jul 2, 2018

#590

@MoeMoeFish
Copy link

希望能支持,不知道作者有没有计划呢?

@aOrz
Copy link
Member

aOrz commented Jul 16, 2018

升级 mpvue-loader@1.1.0-rc.1 和 webpack-mpvue-asset-plugin@0.1.0-rc.1,已经支持,可以先试下,对比下 https://github.com/mpvue/mpvue-quickstart/pull/39/files 改下 webpack 配置。

@feng-fu
Copy link

feng-fu commented Jul 17, 2018

@aOrz 你好,我通过你的配置对webpack配置进行修改或者直接用你的分支初始化项目,然后在main.json文件中配置分包,npm run buildnpm start都会卡住,电脑windows 10

// main.json
{
  "pages": [
    "pages/index/main",
    "pages/logs/main"
  ],
  "subPackages": [
    {
      "root": "test",
      "pages": [
        "counter/main"
      ]
    }
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

image

@aOrz
Copy link
Member

aOrz commented Jul 17, 2018

@feng-fu 没有 win,能帮忙排查下是什么问题吗?

@wind4gis
Copy link

@aOrz 我这边也是win,按照这么分包报错了,但是用mac没有报错
使用这种分包策略之后,在dist文件夹下没办法打包出pages,页面还是保留在src/pages下,并且loader只解析出wxml部分,没有看到wxss、js、json文件

@aOrz
Copy link
Member

aOrz commented Jul 20, 2018

@wind4gis 对比下 https://github.com/mpvue/mpvue-quickstart/pull/39/files 改下 webpack 配置。

@wind4gis
Copy link

@aOrz 原因大概发现了,因为Windows下通过file读取出来的路径是\这种反斜杠,而通过node的resolve方法得到的rootSrc是斜杠/来区分路径,所以在执行file.replace(rootSrc + '/', '').replace('.js', '');这句话的时候,实际上没有起到作用

function getEntry (rootSrc) { var map = {}; glob.sync(rootSrc + '/pages/**/main.js') .forEach(file => { var key = file.replace(rootSrc + '/', '').replace('.js', ''); map[key] = file; }) glob.sync(rootSrc + '/pages/**/main.json') .forEach(file => { configFilesArray.push({ from: file, to: file.replace(rootSrc + '/', '') }) }) return map; }

我改了,但是在编译之后还是报了Conflict: Multiple assets emit to the same filename app.js 这个错误,不知道哪里的配置错了

@wind4gis
Copy link

wind4gis commented Jul 21, 2018

@feng-fu @aOrz
我加了一个normalize方法,保证win平台和Linux平台下的路径一致,就可以打包通过了

// webpack.base.conf.js
function normalize(pathStr) {
  return pathStr.split(path.sep).join('/')
}
function getEntry (rootSrc) {
  var map = {};
  glob.sync(rootSrc + '/pages/**/main.js')
  .forEach(file => {
    var tmpFile = normalize(file)
    var key = tmpFile.replace(normalize(rootSrc) + '/', '').replace('.js', '');
      map[key] = tmpFile;
  })
  glob.sync(normalize(rootSrc) + '/pages/**/main.json')
  .forEach(file => {
    var tmpFile = normalize(file)
    configFilesArray.push({
      from: tmpFile,
      to: tmpFile.replace(normalize(rootSrc) + '/', '')
    })
    })
  return map;
}

const appEntry = {
  app: normalize( resolve('./src/main.js') )
}

configFilesArray.push({
  from: normalize( resolve('./src/main.json') ),
  to: 'app.json'
})

@wind4gis
Copy link

把normalize改为使用relative库,在mac和win下一切打包正常

var relative = require('relative');
function getEntry(rootSrc) {
    var map = {};
    //fileArray 自定义打包入口分包
    var fileArray = ['pages', 'subOrder/pages', 'groups', 'subSeckill', 'bargain', 'subRefund', 'subCoupon'];
    fileArray.map(name => {
        glob.sync(rootSrc + `/${name}/**/main.js`).forEach(file => {
            var key = relative(rootSrc, file).replace('.js', '');
            map[key] = file;
        });
        glob.sync(rootSrc + `/${name}/**/main.json`).forEach(file => {
            configFilesArray.push({
                from: file,
                to: relative(rootSrc, file)
            });
        });
    });
    return map;
}

@lzh-kf
Copy link

lzh-kf commented Jul 27, 2018

@aOrz 我按照的你方法修改之后,确实可以打包成功,但是项目的wxls都被打包到components下目录下,但是微信开发工具提示不能找到wxls文件,我想问一下,这个引用是在哪个文件下配置的,真的头疼

@aOrz
Copy link
Member

aOrz commented Jul 27, 2018

@lzh-kf mpvue-loader 升级了?

@lzh-kf
Copy link

lzh-kf commented Jul 27, 2018

不好意思啊 这个问题 我忽略了 已经成功打包了 困扰了一天终于完成了 谢谢 @aOrz

@EdwardJun
Copy link

@wind4gis 按照你的说法 添加了 relative 库后,运行项目会提示 app.json 中的定义的 pages "pages/index/main" 对应的 WXML 文件,且 打包后的 app.json 文件里并没有 .wxml 文件

@EdwardJun
Copy link

@aOrz 如果没有加 @wind4gis 说的 relative 这个库,运行时确实会卡顿。可是加了之后打包成功也还是提示 app.json 中的定义的 pages "pages/index/main" 对应的 WXML 文件,且 打包后的 app.json 文件里并没有 .wxml 文件。我是升级了 mpvue-loader 的

@hjdshu
Copy link
Author

hjdshu commented Aug 27, 2018

https://github.com/hjdshu/mpvue-subpackages
大家好啊,我这个架子,是根据官方的分包加载的changelog里面来修改的,因为我原来的小程序的路径是 pages/index/index这种路径,为了兼容以前的一些链接,所以我修改了一部分webpack配置文件, 但是现在有个问题是,子包初始化的时候控制台会有error,不知道大家遇到过没有

@Leeehuixian
Copy link

Leeehuixian commented Aug 28, 2018

参照 https://github.com/mpvue/mpvue-quickstart/pull/39/files 修改了webpack配置,也添加了relative库,重新打包后,dist下确实生成了app.json,但是开发者工具报错:
image

//main.json
{
  "pages": [
    "pages/homePage/main",
    "pages/informationIntroduction/main",
    "pages/projectList/main",
    "pages/paymentMethod/main",
    "pages/ordeSubmission/main",
    "pages/my/main",
    "pages/myCollection/main",
    "pages/myOrder/main",
    "pages/myCoupon/main",
    "pages/myShippingAddress/main",
    "pages/personalInformation/main",
    "pages/voucherCenter/main",
    "pages/payAttentionPublicNumber/main",
    "pages/viewConsumptionCode/main",
    "pages/orderDetails/main",
    "pages/addRreceivingAddress/main",
    "pages/modifyAddress/main"

  ],
  "subPackages": [
    {
      "root":"memberCenter",
      "pages":[
        "pages/memberCenter",
        "pages/registeredMember/main",
        "pages/bindingMembershipCard/main",
        "pages/membershipCardDetails/main",
        "pages/myMembershipCard/main",
        "pages/purchaseHistory/main",
        "pages/purchaseSecondaryCard/main",
        "pages/recharge/main",
        "pages/electronicCard/main",
        "pages/confirmationOrder/main"
      ]
    },
    {
      "root":"integralMall",
      "pages":[
        "pages/integralMall/main",
        "pages/integralRule/main",
        "pages/membershipCardIntegralDetail/main",
        "pages/signIn/main",
        "pages/detailsExchangeGoods/main",
        "pages/integralSelectedUse/main",
        "pages/recordExchange/main"
      ]
    },
    {
      "root":"selfHelpOrder",
      "pages":[
        "pages/selfHelpOrder/main",
        "pages/selfHelpPointDetails/main",
        "pages/admissionInformation/main",
        "pages/bindHand/main",
        "pages/electronicHand/main",
        "pages/pointSingleBindingHand/main",
        "pages/bindHandSuccess/main",
        "pages/selfCheckout/main",
        "pages/selfCheckoutPay/main",
        "pages/selfCheckoutAfter/main",
        "pages/outCard/main",
        "pages/micropoint/main",
        "pages/paymentDetial/main"
      ]
    }
  ],
  "window": {
    "backgroundTextStyle": "white",
    "navigationBarBackgroundColor": "#f3f5f9",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#5a90fc",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "list": [
      {
        "text": "商城",
        "pagePath": "pages/homePage/main",
        "iconPath": "/static/images/homeBefore.png",
        "selectedIconPath": "/static/images/homeAfter.png"
      },
      {
        "text": "个人中心",
        "pagePath": "pages/my/main",
        "iconPath": "static/images/shopBefore.png",
        "selectedIconPath": "static/images/shopAfter.png"
      }
    ]
  }
}

项目目录截图:
image

求指正错误! #

@MrMrZ
Copy link

MrMrZ commented Sep 3, 2018

@aOrz 遇到
image
这个问题,求解答QTQ呜呜呜

@flyfox11
Copy link

flyfox11 commented Sep 9, 2018

@Leeehuixian 分包放错了位置

@yuke921
Copy link

yuke921 commented Oct 7, 2018

@aOrz 你好,我通过你的配置对webpack配置进行修改或者直接用你的分支初始化项目,然后在main.json文件中配置分包,npm run buildnpm start都会卡住,电脑windows 10

// main.json
{
  "pages": [
    "pages/index/main",
    "pages/logs/main"
  ],
  "subPackages": [
    {
      "root": "test",
      "pages": [
        "counter/main"
      ]
    }
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

image

请问你的问题解决了吗,我也遇到了同样的问题

@sousuo28
Copy link

sousuo28 commented Oct 23, 2018

参照 https://github.com/mpvue/mpvue-quickstart/pull/39/files 修改了webpack配置,也添加了relative库,重新打包后,dist下确实生成了app.json,但是开发者工具报错:
image

//main.json
{
  "pages": [
    "pages/homePage/main",
    "pages/informationIntroduction/main",
    "pages/projectList/main",
    "pages/paymentMethod/main",
    "pages/ordeSubmission/main",
    "pages/my/main",
    "pages/myCollection/main",
    "pages/myOrder/main",
    "pages/myCoupon/main",
    "pages/myShippingAddress/main",
    "pages/personalInformation/main",
    "pages/voucherCenter/main",
    "pages/payAttentionPublicNumber/main",
    "pages/viewConsumptionCode/main",
    "pages/orderDetails/main",
    "pages/addRreceivingAddress/main",
    "pages/modifyAddress/main"

  ],
  "subPackages": [
    {
      "root":"memberCenter",
      "pages":[
        "pages/memberCenter",
        "pages/registeredMember/main",
        "pages/bindingMembershipCard/main",
        "pages/membershipCardDetails/main",
        "pages/myMembershipCard/main",
        "pages/purchaseHistory/main",
        "pages/purchaseSecondaryCard/main",
        "pages/recharge/main",
        "pages/electronicCard/main",
        "pages/confirmationOrder/main"
      ]
    },
    {
      "root":"integralMall",
      "pages":[
        "pages/integralMall/main",
        "pages/integralRule/main",
        "pages/membershipCardIntegralDetail/main",
        "pages/signIn/main",
        "pages/detailsExchangeGoods/main",
        "pages/integralSelectedUse/main",
        "pages/recordExchange/main"
      ]
    },
    {
      "root":"selfHelpOrder",
      "pages":[
        "pages/selfHelpOrder/main",
        "pages/selfHelpPointDetails/main",
        "pages/admissionInformation/main",
        "pages/bindHand/main",
        "pages/electronicHand/main",
        "pages/pointSingleBindingHand/main",
        "pages/bindHandSuccess/main",
        "pages/selfCheckout/main",
        "pages/selfCheckoutPay/main",
        "pages/selfCheckoutAfter/main",
        "pages/outCard/main",
        "pages/micropoint/main",
        "pages/paymentDetial/main"
      ]
    }
  ],
  "window": {
    "backgroundTextStyle": "white",
    "navigationBarBackgroundColor": "#f3f5f9",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#5a90fc",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "list": [
      {
        "text": "商城",
        "pagePath": "pages/homePage/main",
        "iconPath": "/static/images/homeBefore.png",
        "selectedIconPath": "/static/images/homeAfter.png"
      },
      {
        "text": "个人中心",
        "pagePath": "pages/my/main",
        "iconPath": "static/images/shopBefore.png",
        "selectedIconPath": "static/images/shopAfter.png"
      }
    ]
  }
}

项目目录截图:
image

求指正错误! #

分包的文件夹,比如packageA,也要放在src/pages/packageA这里。在app.json里这样写:

...
"subPackages": [
{
"root":"pages/packageA",
"pages":["test/main"]
}
]

这篇分享挺好,有比较详细的介绍
小程序分包(原生+mpvue)

不知道为什么大家回答问题都喜欢说一半,故意不说怎么解决... 浪费时间

@kevinlvhsl
Copy link

报错:subPackages[0].root 字段需为 目录 一直都有, 有人有解决了吗? 贴一下源码地址?

@ReggieCai31
Copy link

ReggieCai31 commented Jan 31, 2019

@sousuo28 nice

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests