当我尝试导入某些JS文件时出现'找不到模块'错误

Question

我目前正在学习JS，这是来自实践的代码。（来自YDKJSY）

这是publication.js

function printDetails(title,author,pubDate) { 
    console.log(` 
    Title: ${ title } 
    By: ${ author } 
    ${ pubDate } `
    ); 
}
export function create(title,author,pubDate) { 
    var publicAPI = { 
        print() { 
            printDetails(title,author,pubDate); 
        } 
     };
return publicAPI;
}

并且此blogpost.js导入publication.js

import { create as createPub } from "publication.js";
function printDetails(pub,URL) { 
    pub.print(); console.log(URL); 
}
export function create(title,author,pubDate,URL) { 
    var pub = createPub(title,author,pubDate);
var publicAPI = { print() { printDetails(pub,URL); 
        } 
    };
return publicAPI;
}

最后是main.js导入blogpost.js

import { create as newBlogPost } from "blogpost.js";
var forAgainstLet = newBlogPost( 
    "For and against let", 
    "Kyle Simpson", 
    "October 27, 2014", 
    "https://davidwalsh.name/for-and-against-let" 
);

我通过babel转换了这些代码并获得了转换后的代码。

PS C:\users\leepc\babel> npm run build

> [email protected] build C:\users\leepc\babel
> babel ./public/src -d ./public/lib -w

public\src\blogpost.js -> public\lib\blogpost.js
public\src\main.js -> public\lib\main.js
public\src\publication.js -> public\lib\publication.js

但是当我执行npm run build并尝试运行main.js时，我明白了，

PS C:\users\leepc\babel\public\lib> node main.js

internal/modules/cjs/loader.js:984
  throw err;
  ^

Error: Cannot find module 'blogpost.js'
Require stack:
    at Module.require 
(internal/modules/cjs/loader.js:1043:19)     
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> 
(C:\users\leepc\babel\public\lib\main.js:3:17)     
    at Module._compile 
(internal/modules/cjs/loader.js:1157:30)    3:17)     
    at Object.Module._extensions..js 
(internal/modules/cjs/loader.js:117     
7:10)                                                                        
    at Module.load (internal/modules/cjs/loader.js:1001:32)                  
    at Function.Module._load 
(internal/modules/cjs/loader.js:900:14)         

    at Function.executeUserEntryPoint [as runMain] 
(internal/modules/run
_main.js:74:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ 
'C:\\users\\leepc\\babel\\public\\lib\\main.js' ]

}

我检查了我是否忘记了任何分期付款。

PS C:\users\leepc\babel> npm ls --depth=0

[email protected] C:\users\leepc\babel
+-- @babel/[email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

Lastley，关于。babelrc

{
  "presets": ["env"]
}

和package.json构建，

{
    ...
    "build": "babel ./public/src -d ./public/lib -w"
  }

我使用了node.js预设，但出现了奇怪的错误，因此如果使用“ env”，我就离开了。

很抱歉，代码太长而且很乱，但是最近我一直在为这个问题而烦恼，无法继续研究。请让我知道在这个问题上我还需要发布和编辑其他信息。

编辑：可能是因为我将所有这些文件放在同一个文件夹中吗？我应该把它们放在一个不同的文件夹中吗？This is a picture of my practice project folder

Answer 1

您是否已按照https://www.npmjs.com/package/babel-plugin-import的步骤进行设置？

npm install babel-plugin-import --save-dev

在.babelrc中

{
  "plugins": [["import", options]]
}

Answer 2

请尝试使您的模块相对于要导入的文件。通常，没有路径的导入适用于node_modules。

import { create as newBlogPost } from "./blogpost.js"; 
// or wherever your blogpost.js is relative to your main.js
...

Answer 3

好吧，我应该结合以上两个答案。

首先，我必须检查我的导入插件是对还是错。所以我只是重新安装了它。

npm install babel-plugin-import --save-dev

请确保不要忘记放置插件选项。就我而言，我在。babelrc

中使用它

{
    "presets": ["es2015"],
    "plugins": [["import", { "libraryName": "antd" }]]
}

此"plugins": [["import", { "libraryName": "antd" }]行表示以模块化方式导入js。

还有下一个内容，我必须设置导入路径才能更正。

import { create as newBlogPost } from "blogpost.js"; 

将此更改为

import { create as newBlogPost } from "./blogpost.js"; 

通过执行此操作，现在可以获得到目前为止想要的结果。

PS C:\Users\leePC\babel\public\lib> node main.js

    Title: For and against let 
    By: Kyle Simpson 
    October 27, 2014 

因此，1.检查我是否错过了一些插件或软件包（在我的情况下，我忘记了导入软件包）2.确保检查您的导入路径

谢谢您的帮助。