fix: compatible with webpack5 externals script

[fangbinwei]

fixes vuejs/vue-cli#6149 when using Vue2 with vue-loader

I have added test to verify that api.install(Vue) will be executed correctly

[haoqunjiang]

Does it have to be import? I'm not sure if it would break some CommonJS code.

[fangbinwei]

if it would break some CommonJS code.

I'm not sure what 'some CommonJS code' means here

As far as I know, import in webpack can handle both ES Module and CommonJS

import Vue from 'vue/dist/vue.esm.js'
console.log(Vue.version) // works

import Vue from 'vue/dist/vue.common.js'
console.log(Vue.version) //works

but require is different

const Vue = require('vue/dist/vue.esm.js')
console.log(Vue.default.version)

const Vue = require('vue/dist/vue.common.js')
console.log(Vue.version)

So Vue = vue.__esModule ? vue.default : vue in vue-hot-reload-api is necessary for require('vue'). But it's redundant for import Vue from 'vue', since webpack will check __esModule in generated code and import Vue as expected.

Therefore, I think import Vue form 'vue' won't break codes below

var api = require(`path_to_vue-hot-reload-api`)// or import api from 'path_to_vue-hot-reload-api'
api.install(...)

Does it have to be import?

From the documentation, externalsType: 'script' works fine with import.

And it can work with require like example below. Promise fulfilled after the script is loaded.

require('vue').then(Vue => {
  
})

When using import Vue from 'vue' webpack will handle the Promise, I think it's because ESModule can be statically analyzed. Compared to require, webpack can do more for import at the compile stage.

I didn't see externalsType: script related discussions, maybe I can get more information from source code

[haoqunjiang]

Try this (in HelloWorld.vue):

import Vue from 'vue' // eslint-disable-line

module.exports = {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}

vs

module.exports = {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}

[fangbinwei]

Maybe the import statement added by vue-loader-v15 doesn't conflict with the sciprt in HelloWorld.vue?

some problem I find

• webpack will generated some code to await the script tag resolve, it doesn't compatible with ie11 (Need to investigate)

[haoqunjiang]

Oh sorry, I forgot it is in another module rather than the script module…

[xuemanchi]

Any news？