时间戳

首页 > 解决方案 > 从 ESModules 中的复杂路径导入模块的最佳方法是什么

javascript - 从 ESModules 中的复杂路径导入模块的最佳方法是什么

问题描述

在 CommonJS 中，我使用这种方式。

require(constant.APPROOT + "/lib/utils.js")

代替

require("../../../../../../lib/utils.js")

但是，它不能在 ESModules 中工作。

import util from constant.APPROOT + "/lib/util.js"
// Uncaught SyntaxError: Unexpected identifier

我知道原因，因为它不是静态的。

我尝试两种方式。

[1st]（接受复杂路径）

import path from "path"
import fs from "fs"
import foo from "./foo.js"
import bar from "../../../../../lib/bar.js"
import util from "../../../../../lib/util.js"

// application code

[2nd]（使用动态导入）

import path from "path"
import fs from "fs"
import foo from "./foo.js"

!async function main(){
   const [bar, util] = await Promise.all([
       import(constant.APPROOT + "/lib/bar.js"),
       import(constant.APPROOT + "/lib/util.js"),
   ])

   // application code

}()

我认为两者都不好。什么是最好的方法？

标签： javascriptnode.js

解决方案

1. 网页包

您可以使用webpack来设置别名（如果您正在构建一个节点应用程序，然后target: node在您的配置中进行设置，那么有很多关于如何完成此操作的好指南）：

  resolve: {
    ...,
    alias: {
      '$lib': constant.APPROOT + "/lib"
    }
  }

然后像 --> 一样导入import util from "$lib/util.js"

2.npm包

你可以使用这个包在 package.json 中设置别名 --> https://github.com/ilearnio/module-alias

推荐阅读