[求答疑] 子应用入口文件 main.js 所在的 script 标签带有 type=module，fetch 获取该资源后执行报错

[sufengyong]

What happens?

开发环境下，使用 vite(vite 不是 webpack) 初始化的 vue3 子项目时，子项目的 html 的入口文件的 script 标签上有 type=module，而乾坤内部直接取用了 script 上的 src 的值通过 fetch 获取后 eval 直接执行而忽略了 script 标签上带有的 type=module ，导致执行失败报错

Cannot use import statement outside a module
error occurs while executing normal script <script type="module">import "/vite/client"</script>
error occurs while executing entry script //localhost:3000/main.js

最小可复现仓库

公司内网项目无法对外提供，使用 vite 直接初始化 vue3 项目作为子项目即可浮现

复现步骤，错误日志以及相关配置

使用 vite 初始化项目后直接做为子项目，配置好主应用的路由指向子应用，运行即可出现

相关环境信息

• qiankun 版本
  2.2.2
• 浏览器版本：
  chrome85.0.4183.102（正式版本） （64 位）
• 操作系统：
  win10

[zhe-he]

问楼主个问题，如何在vite中向外暴露jsonpFunction

配置微应用的打包工具
除了代码中暴露出相应的生命周期钩子之外，为了让主应用能正确识别微应用暴露出来的一些信息，微应用的打包工具需要增加如下配置：

module.exports = {
  output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${packageName}`,
  },
};

上面的配置文字 在vite.config.js怎么写，感谢🙏

[zhe-he]

找到了 vite 和 single-spa的结合
single-spa/single-spa#645

[NidMo]

这个问题解决了吗

[ydfzgyj]

花了两天的时间，勉强算是跑通了，给一个我的解决方案：

1. main.js 里，和之前一样导出 bootstrap、mount、unmount 几个接口；
2. 按普通项目的方式先 build 一次，把生成的 index.html 的内容复制一份保存下来；
3. 由于接下来我们要添加的代码会对开发环境造成影响，因此先复制出一个打包专用的 config 文件，比如叫 vite.build.config.js，之后 build 就用 vite build --config vite.build.config.js；
4. 在新的 config 文件中加入以下代码：

{
  ...

  rollupInputOptions: {
    input: 'src/main.js',
    preserveEntrySignatures: true
  },
  rollupOutputOptions: {
    output: {
      dir: 'dist',
      assetFileNames: '_assets/[name].[hash][extname]',
      entryFileNames: '_assets/[name].[hash].js',
      format: 'umd',
      name: '自定义'
    }
  }
}

5. 再次 build，注意上一步我们把入口文件从 index.html 改成了 main.js，原因是 rollup 会进行摇树，当我们从 index.html 开始打包，由于 main.js 中的几个钩子函数没有被调用，因此会被摇掉，而从 main.js 直接开始打包就不会。但是这样打包之后生成的文件就没有 index.html，因此我们需要把第二步保存的文件添加回来，并更新里边引用的 js 和 css 文件的地址。
6. 在父应用调用的时候，注意调用子应用的名称必须和第四步自定义的应用名称一致，否则会找不到子应用。

总的来说因为以后每次打包都要手动改一次 index.html，还是比较恶心的，但目前我没找到除了直接关闭 tree-shaking 之外有什么其他避免把几个钩子函数摇掉的办法，希望有人能找到改进的方法

[vlev1n]

新版的import-html-entry已经支持type="module"（参见此处），只是qiankun的依赖还没更新，相信快了！

[Amorites]

新版的import-html-entry已经支持type="module"（参见此处），只是qiankun的依赖还没更新，相信快了！

不是依赖的问题，建议把这个 issue close 统一在这里讨论 #1257