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

[BugKun]

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

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

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

• webpack-mpvue-asset-plugin 进行了修改，并重命名为 webpack4-mpvue-asset-plugin 方便在 npm 上安装。查看源码
• mpvue-loader 进行了修改，并重命名为 webpack4-mpvue-loader 方便在 npm 上安装。 查看源码（babel@6） 查看源码（babel@7）
• ~~新增 webpack4-mpvue-optimize-plugin ，用于处理 webpack4 打包时抽取公共代码后全局变量不是 global 的问题。查看源码~~（更改为使用其他方式处理）
• 替换了 mpvue-webpack-target 为 mpvue-webpack-target-webpack4, 这个包是由 Beven91 进行修改和开源的，改得非常好，我就不另外自己写了，就直接使用这个包了。查看源码

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

[Cweili]

期待 mpvue 早日支持 webpack 4

[michael2h4ng]

@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]

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

[michael2h4ng]

@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]

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

[michael2h4ng]

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

[cdd111]

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

• [email protected]
• [email protected]

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]

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

[cdd111]

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

不支持mpvue2.0版本吗

[BugKun]

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

[wython]

高玩