search

Meituan-Dianping / mpvue

基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系。
http://mpvue.com
MIT License
20.42k stars 2.07k forks source link

mpvue 支持 webpack4 的解决方案(WebPack4 Support) #1462

Open BugKun opened 5 years ago

BugKun commented 5 years ago

这里有一个 DEMO 可以测试。点击查看

基于 mpvue 1.4.0 进行修改，从原版的 Webpack3 更新到 Webpack4。同时新增支持 babel@7 的分支。

为了支持 Webpack4，我还修改或新增了这些包

最后我会对自己进行修改的包分别进行PR，希望官方能采纳。

Cweili commented 5 years ago

期待 mpvue 早日支持 webpack 4

michael2h4ng commented 5 years ago

@BugKun 尝试了你发布的 Demo，对于 webpack4-mpvue-optimize-plugin 插件有点疑问——

如果我在 Babel 配置中引入 polyfill：

  [
    "@babel/env",
    {
      targets: {
        chrome: "53",
        ios: "8"
      },
      useBuiltIns: "usage",
      corejs: "2"
    },
  ],

core-js 在运行时会无法取得正确的 global 对象（源码：https://github.com/zloirock/core-js/blob/v2/modules/_global.js ），猜测这是因为 webpack4-mpvue-optimize-plugin 在 JS 文件顶部重置了 self？

我对比了 WebPack 3 和 WebPack 4 的编译结果，发现全局变量从 global 变成了 self，不确定这个变化是由什么导致的。如果解决这个问题的方案是重新定义 self，那么 WebPack 4 + Babel 7 下引入 polyfill 还有其他可行思路吗？

BugKun commented 5 years ago

@monomichael 我修改了处理global对象的方式，弃用了webpack4-mpvue-optimize-plugin，你重新拉一下代码，看看可以了没有？ 另外webpack4-mpvue-asset-plugin要更新到2.0.3版本。

michael2h4ng commented 5 years ago

@BugKun 这个问题仍然存在，可能还存在其他原因 这里是可以重现的最小例子：https://github.com/monomichael/mpvue-webpack4-demo

我在 .babelrc 中新增了 useBuiltIns 的配置，并且在 pages/index/index.vue 的 mounted 方法中使用了 Number 和 Promise.finally 特性。在编译后的代码中，Babel 正确引入了 es6.number.* 和 es7.promise.finally，但小程序运行时提示如下错误：

thirdScriptError 
 sdk uncaught third Error 
 Cannot read property 'prototype' of undefined 
 TypeError: Cannot read property 'prototype' of undefined
    at Object../node_modules/core-js/modules/es6.number.constructor.js
BugKun commented 5 years ago

断点调试了一下，主要是这段代码的问题 var NUMBER = 'Number'; var $Number = global[NUMBER]; var Base = $Number; var proto = $Number.prototype; 小程序的全局变量global中是没有Number的，所以报错了。小程序的global和浏览器的window不同。JS的Number是不在global中的 @monomichael

michael2h4ng commented 5 years ago

@BugKun 暂时切换成了 Babel 6 的分支就没有问题了。确实是跟 Babel 7 分支下 polyfill 的方式有关系。

cdd111 commented 5 years ago

根据修改之后出现这些报错 是要升级到哪些版本？ Vue packages version mismatch:

This may cause things to work incorrectly. Make sure to use the same version for both. If you are using mpvue-loader, re-installing them should bump mpvue-template-compiler to the latest.

BugKun commented 5 years ago

@cdd111 版本不对，我是基于mpvue 1.4.0做的，对应的vue版本是2.4.1 版本在这里看

cdd111 commented 5 years ago

@cdd111 版本不对，我是基于mpvue 1.4.0做的，对应的vue版本是2.4.1 版本在这里看

不支持mpvue2.0版本吗

BugKun commented 5 years ago

@cdd111 我是基于mpvue的lts版(1.4.0)做的，不支持2.0

wython commented 3 years ago

高玩