为什么 ES6 模块导入表达式不适用于带有某些路径参数的资产文件夹中的 json 文件？

Question

我遇到了一个似乎不合逻辑的 ES6 导入情况，我想知道为什么以下导入在 Vue.js SFC 的方法中不起作用：

const fullContentFile = '@/assets/rules/rules.json'

import(fullContentFile).then(data => console.log('data 8: ', data))

它在浏览器的控制台上抛出以下错误：

Uncaught (in promise) Error: Cannot find module '@/assets/rules/rules.json'

    at eval (eval at ./src/components/staboqwi lazy recursive (app.js:2117), <anonymous>:5:11)

我的项目设置重现该失败：

vue create import-issue（创建一个 Vue.js 项目并接受默认值）

创建一个文件：src/assets/rules/rules.json具有以下内容：

    [1,2,3,4,5]

在 App.vue 中添加以下created()方法：

created() {

  // The first three imports work always:

  import('@/assets/rules/rules.json').then(data =>

    console.log('data 1: ', data)

  )

  

  const file = 'rules'

  import('@/assets/rules/' + file + '.json').then(data =>

    console.log('data 2: ', data)

  )

  const fileName = 'rules.json'

  import('@/assets/rules/' + fileName).then(data =>

    console.log('data 3: ', data)

  )

  // The next two imports break compilation if used within htmlcars project

  const fileName2 = 'rules/rules.json'

  import('@/assets/' + fileName2).then(data =>

    console.log('data 4: ', data)

  )

  const fileName3 = 'assets/rules/rules.json'

  import('@/' + fileName3).then(data => console.log('data 5: ', data))

  // Those imports don't work:

  const contentFile = '/assets/rules/' + file + '.json'

  import('@' + contentFile).then(data => console.log('data 6: ', data))

  const atContentFile = '@/assets/rules/' + file + '.json'

  import(atContentFile).then(data => console.log('data 7: ', data))

  const fullContentFile = '@/assets/rules/rules.json'

  import(fullContentFile).then(data => console.log('data 8: ', data))

},

从导入的变体中可以看出，唯一的区别是作为字符串提供给路径参数的内容以及存储在常量/变量中的内容。

我确实花了 2 个晚上试图在 Google 和 stackoverflow 上找到答案。也许比我有更多 javascript 背景的人可以解释最后三个导入与之前的导入相比有什么问题。

一个有趣的副作用是，如果将该方法添加到它的文件中（不要忘记添加） ，那么第四次和第五次导入会破坏htmlcars项目的编译。如果注释掉项目将构建。这是为什么？导入与编译失败的 scss 文件完全无关。create()App.vuesrc/assets/rules/rules.json

Answer 1

你需要知道，import()今天常见的 JS 项目（包括 Vue）中的语句是在构建时由 Webpack 处理的，而不仅仅是在运行时在构建时，Webpack 需要知道导入了哪个文件，以便它可以在运行时使用它（transpile JS、预处理 SCSS 等）。但是因为这个导入是动态的并且 Webpack 不能执行你的代码，所以它不可能知道传入的参数的import() 确切含义。它只能解析代码并做出猜测—— “这里可以导入哪个文件？” （基于你的文件系统的内容）因此，从“JavaScript 执行”的角度来看示例并比较案例是没有意义的，因为什么有效，什么无效最终取决于 Webpack 解析内部表达式并做出正确猜测的能力()......