ESM - ES modules 是 JavaScript 官方的标准化模块系统。相比于 CommonJS 和 AMD 等模块规范,最新浏览器原生支持模块功能,不再需要额外打包处理 或者 少部分的处理
三级共享出发初衷是为了结局MF共享逻辑的CDN复用不高的问题,v2.5 之前 共享逻辑
v2.5 之后 针对开发环境引入ImportMap 适配多环境,多版本支持
emp build -t
生成产物与 d.ts
到 dist
const {defineConfig} = require('@efox/emp')
const {cdn, esm} = require('./cdn')
const reactVersion = '17.0.2'
const esmVersion = 'es2018'
module.exports = defineConfig(({mode}) => {const target = esmVersionreturn {build: {target,},server: {port: 8001,},empShare: {name: 'microHost',exposes: { // Expose 共享模块'./App': './src/App','./incStore': './src/store/incStore',},shareLib: { // 通过约束请求 ESM模块react: esm('react', mode, reactVersion, esmVersion),'react-dom': esm('react-dom', mode, reactVersion, esmVersion),zustand: esm('zustand', mode, '4', esmVersion, `react@${reactVersion},react-dom@${reactVersion}`),},},html: {title: 'Micro-Host'},}
})
emp start
,应用可以执行 emp dts
通过需要的类型依赖const {defineConfig} = require('@efox/emp')
const {cdn, esm} = require('./cdn')
const reactVersion = '17.0.2'
const esmVersion = 'es2018'
module.exports = defineConfig(({mode, env}) => {const target = esmVersionreturn {build: {target,},server: {port: 8002,},empShare: {name: 'microApp',remotes: { // 应用 共享模块'@microHost': `microHost@http://localhost:8001/emp.js`,},exposes: {'./App': './src/App',},shareLib: { // 通过约束请求 ESM模块react: esm('react', mode, reactVersion, esmVersion),'react-dom': esm('react-dom', mode, reactVersion, esmVersion),zustand: esm('zustand', mode, '4', esmVersion, `react@${reactVersion},react-dom@${reactVersion}`),},},html: {title: 'Micro-App'},}
})
经过以上改造,我们可以得到一个 ESM 完全独立于基站的应用开发环境,不需针对开发另外启动一个新环境做适配,更好的提升开发体验
为大家准备了一个前端资料包。包含54本,2.57G的前端相关电子书,《前端面试宝典(附答案和解析)》,难点、重点知识视频教程(全套)。
有需要的小伙伴,可以点击下方卡片领取,无偿分享