内容提要
这篇文章讨论了在Webpack配置中解决dayjs模块导入问题的方法。作者建议使用Webpack配置来解决dayjs默认导入不是esm的问题,并提供了相应的代码示例。
延伸解读
为什么 resolve.fullySpecified 不生效
文章指出,将 resolve.fullySpecified 设为 false 无法解决 dayjs 子路径导入报错,因为 ESM 的完全指定规则优先级更高。这意味着在严格 ESM 环境下,仅靠关闭该选项无法绕过扩展名强制要求,需要从模块解析路径入手。
哪些工程不会遇到此问题
根据文章,如果 dayjs 在 package.json 中声明了 exports,或者工程本身是传统 CJS 工程,又或者所有导入都手动添加了扩展名,就不会触发该错误。这提示读者先确认自身工程类型和依赖的导出配置,再决定是否修改 Webpack。
alias 配置的关键细节
文章给出的方案通过 alias 将 dayjs、dayjs/locale 和 dayjs/plugin 分别指向 esm 目录下的文件。其中 dayjs$ 的 $ 符号表示精确匹配,缺少它会导致后两条规则无法命中。这一细节是配置能否生效的关键,读者需特别注意。
Q&A
如何解决Webpack中dayjs模块导入的问题?
可以通过修改Webpack配置,确保dayjs的导入路径指向其ESM版本,具体代码示例已在文章中提供。
为什么在导入dayjs时会出现需要添加扩展名的错误?
这是因为Webpack在严格的ESM环境下要求请求必须完全指定,包括文件扩展名。
在Webpack中如何配置dayjs的别名?
可以在Webpack配置中使用alias字段,将dayjs的导入路径指向其ESM版本,例如:'dayjs$': path.resolve(dayjsPath, 'esm/index.js')。
如果dayjs在package.json中写了exports,会有什么影响?
如果dayjs在package.json中写了exports,可能不会遇到导入错误,因为Webpack会根据exports规则解析模块。
为什么将resolve.fullySpecified改为false无效?
因为ESM的限制规则仍然存在,修改此选项无法解决导入时的扩展名要求。
dayjs后的$符号有什么重要性?
dayjs后的$符号表示精确匹配,确保Webpack规则能够正确命中,否则可能导致导入失败。