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.

Sign up for GitHub

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

Jump to bottom

[RFC] 入口html 支持 type="module" 的 script #260

Closed
lijianzhang opened this issue Mar 4, 2021 · 4 comments
Closed

[RFC] 入口html 支持 type="module" 的 script #260

lijianzhang opened this issue Mar 4, 2021 · 4 comments
Labels
discuss
Milestone
v2.6.0

Comments

@lijianzhang
Copy link

比如用 vite 打包出来的入口文件格式为

<html>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>
@lijianzhang lijianzhang changed the title [兼容] 入口html 支持 type="module" 的 script [RFC] 入口html 支持 type="module" 的 script Mar 4, 2021
@maoxiaoke
Copy link
Collaborator

@lijianzhang 目前，icestark 已支持 esm 子应用

  1. 通过 entry/entryContent 的方式接入子应用
<AppRouter>
	<AppRoute
		activePath="/seller"
		entryContent={`<!DOCTYPE html>
			<html lang="en">
			  <head>
			    <meta charset="UTF-8" />
			    <link rel="icon" href="/favicon.ico" />
			    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			    <title>Vite App</title>
		            <script type="module" crossorigin src="/index.js"></script>
	                    <link rel="stylesheet" href="/index.css">
	                  </head>
			  <body>
			    <div id="app"></di
		    </body>
			</html>`}
	>
	</AppRoute>
</AppRouter>

在子应用中，可通过 registerAppEnter/registerAppLeave 定义生命周期。

目前针对 esm，icestark 暂不支持 mount/unmount 来定义生命周期。

@maoxiaoke
Copy link
Collaborator

maoxiaoke commented Mar 23, 2021 •
edited
Loading

以下是有关支持 esm 微应用的讨论。

icestark 支持 esm 微应用

背景

icestark 支持 umd、js 自执行打包模式，需支持 esm 规范的子应用

方案

方案一：在现有方案下，若要支持 esm，可通过 entry 的方式来支持（现有，已支持）。

<AppRouter>
	<AppRoute
		activePath="/seller"
		entryContent={`<!DOCTYPE html>
			<html lang="en">
			  <head>
			    <meta charset="UTF-8" />
			    <link rel="icon" href="/favicon.ico" />
			    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			    <title>Vite App</title>
				  <script type="module" crossorigin src="/index.js"></script>
				  <link rel="stylesheet" href="/index.css">
				</head>
			  <body>
			    <div id="app"></di
		    </body>
			</html>`}
	>
	</AppRoute>
</AppRouter>

也可在子应用中通过 registerAppEnter/registerAppLeave 定义生命周期。

import { getMountNode } from '@ali/icestark';

const mountNode = getMountNode();
// 子应用
registerAppEnter(() => {
  ReactDOM。render(App, mountNode)
})

registerAppLeave(() => {
  ReactDOM.unmountComponentAtNode(mountNode)
})

方案二：支持 mount/unmount 导出方式

新增 scriptAttributes 字段：为 script 标签新增的 attribute 属性

interface AppConfig {
	...
  scriptAttributes: ['type=module'],
}

使用方式：

<AppRouter>
  <AppRoute
    name="seller",
    path="/seller",
    url={['https://xxx.js']}
    scriptAttributes={['crossorigin=annoymous', 'type=module']}
</AppRouter />

以上这是声明 script 为 esm。子应用支持导出 mount/unmount 生命周期。

import App from './App';

export function mount () {
	...
}

export function unmount () {
	...
}

其他

  1. esm 仅支持 loadScriptMode: 'script'
  2. esm 不支持 sandbox
  3. 浏览器兼容：需要支持 import 和 dynamic import

@maoxiaoke maoxiaoke mentioned this issue Mar 23, 2021
Closed
maoxiaoke added a commit that referenced this issue Mar 25, 2021
@maoxiaoke
feat: 🎸 support custom script attributes
1d79070 
Closs #276 #260
@maoxiaoke maoxiaoke mentioned this issue May 25, 2021
Closed
@kissy-xxy
Copy link

kissy-xxy commented Jun 7, 2021 •
edited
Loading

答主问题解决了吗？
@maoxiaoke 我按你说的通过enter引入，结果module相关的script都被注释代码替换掉了-，-
< !--script /@vite/client replaced by @ice/stark-->
< !--script /src/main.ts replaced by @ice/stark--> 这个是因为什么呢？

@maoxiaoke
Copy link
Collaborator

@kissy-xxy 内容被 icestark 处理过后重新挂载了

maoxiaoke added a commit that referenced this issue Jun 11, 2021
@maoxiaoke
feat: script attributes (#282)
5b974aa 
* feat: 🎸 support custom script attributes

Closs #276 #260
@maoxiaoke maoxiaoke mentioned this issue Jun 17, 2021
Closed
@maoxiaoke maoxiaoke added this to the v2.6.0 milestone Jul 29, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
discuss
Projects
None yet
Milestone
v2.6.0
Development

No branches or pull requests
3 participants
@kissy-xxy @maoxiaoke @lijianzhang