请教一下 React 动态导入的问题

[nanqic]

我的需求：根据 path 匹配，动态引入 ts 文件（其实是自己定义的静态数据）
现实问题：import().then 用变量时会报错

 let { name } = useParams()
    const [bookData, setBookData] = useState<string[]>()
    useEffect(() => {
        if (name !== undefined) {
            import(`@/store/${name}`)
                .then(module => {
                    // @ts-ignore
                    const data: string[] = module[data]
                    setBookData(data)
                })
        }
    }, [])

上面这样写会报错 Uncaught (in promise) TypeError: Failed to resolve module specifier '@/store/teach'

但是把import(@/store/${name}) 换成 import('@/store/teach')就正常了。但这样并不能满足根据变量导入的需求呀，求大神指出正确方式。

[mxT52CRuqR6o5]

https://webpack.js.org/guides/dependency-management/#require-with-expression

[nanqic]

@mxT52CRuqR6o5 感谢回复，我想可能不应该放在 react 板块里，我用的是 vite ，看一下官方文档，谢谢你的思路

[mxT52CRuqR6o5]

@nanqic
https://vitejs.dev/guide/features.html#dynamic-import
把后缀名加上呢？

[akatquas]

https://stackoverflow.com/questions/47954655/dynamic-imports-in-es6-with-runtime-variables

[nanqic]

@mxT52CRuqR6o5
我试了加上.ts 不可以，把文件修改成 js 后加.js 后缀也不行，打算放弃这种方式了，反正是静态文本，用 json 也一样吧，文件大点也无所谓。

@akatquas
感谢帮助，已经换 json 文件引入了

[joesonw]

你这个动态解析要运行时，运行时’@/xxx’这样是解析不到的。这是编译时 bundler 替换掉的，你动态的编译器也管不了：

[wenerme]

如果真的需要，可以考虑打包为单独 js ，然后 dynamic import 如果浏览器支持，不支持或者稳健点可以考虑 systemjs ，例如 https://github.com/wenerme/wode/tree/main/packages/system , 目前项目用到的这样的动态逻辑

[oatw]

6 楼正解

[xiaoming1992]

如果是服务端渲染，且每个 name 对应一个页面的话，把整个 store 下的文件分别 import 进来，在函数中按需取用，服务端渲染页面的时候应该会把这个页面没用到的 data 移除，可以省掉一点数据量（猜测，不确定）（但是一个 json 数据能有多大呢，除非是几万几十万行，否则没必要这么麻烦，直接全量引进来好了）

[zhuweiyou]

https://cn.vitejs.dev/guide/features.html#dynamic-import 上面写了 如果是一层路径 可以用变量.

你可以考虑用 import.meta.glob 或 import.meta.globEager ,批量导入, 然后 obj[key]() 来用

[RabbitDR]

不知道你具体是什么情况，我试了一下，是可以的，https://stackblitz.com/edit/vitejs-vite-pps848?file=src/App.jsx

[learningman]

@/store/${name}
如果这么搞的话，必须手写配置确保 bundler 打包了所有所需的对应的文件，不然 treeshaking 可能给整没了