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

> babel@1.0.0 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

babel@1.0.0 C:\users\leepc\babel
+-- @babel/core@7.8.4
+-- babel-cli@6.26.0
+-- babel-preset-env@1.7.0
`-- babel-preset-es2015@6.24.1

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.确保检查您的导入路径

谢谢您的帮助。

尝试导入某些JS文件时出现“找不到模块”错误

3 个答案: