导入 git npm 模块导致未定义

Posted 2023-03-07

【中文标题】导入 git npm 模块导致未定义

【英文标题】：Importing git npm modules results in undefined

【发布时间】：2021-04-05 19:05:00

【问题描述】：

我在私有 git 存储库中创建了一个 npm 模块，我正在尝试在另一个应用程序中访问它。 我正在使用 reactjs、webpack 和 npm

所以我有了模块：

    dist
    src
    |   form-mapper
        |   formMapper.js
    |   myfile.js
    |   index.js
    package.json
    webpack.config.js

Webpack.config.js 是这样的：

module.exports = 
    entry: './src/index.js',
    output: 
        filename: 'bundle.js'
    

Package.json 是这样的：

  "name": "my-awesome-module",
  "version": "1.0.0",
  "license": "ISC",
  "main": "./dist/bundle.js",
  "scripts": 
    "prepare": "npm run build",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  ,
  "devDependencies": 
    "webpack": "^4.43.0",
    "webpack-cli": "^4.3.0",
    "webpack-dev-server": "^3.11.0"
  

formMapper.js 作为我尝试导出的 2 个函数：

    export function mapForm() 
        // some code
    
    export function mapUiFormToBackEnd() 
        // some code
    

还有 index.js：

import * as FormMapper from './form-mapper/formMapper'

export  mapForm, mapUiFormToBackEnd  from './form-mapper/formMapper'
export default FormMapper

我在 index.js 中尝试了很多东西，所以我放在这里只是为了向你们展示我已经尝试过的东西。

在我需要使用此模块的应用程序中，我使用 npm (git+ssh://...) 导入模块，因为我可以在 node_modules 中看到我的模块，所以它正在工作。 当我尝试使用以下方式导入时：

import FormMapper from 'my-awesome-module'

componentDidMount() 
   FormMapper.mapForm()

我有这个错误：

my-awesome-module__WEBPACK_IMPORTED_MODULE_2___default.a.mapForm is not a function

这是我第一次尝试创建自己的 npm 模块，但我显然不明白所有内容。我尝试了几个指南，但似乎我无法做到正确。

感谢您的帮助。

编辑： 当我在我的应用程序中记录我的导入时

import FormMapper from 'my-awesome-module'

componentDidMount() 
   console.log(FormMapper)
   FormMapper.mapForm()

我看到一个空对象 正在被记录

【问题讨论】：

字面意思是module-name吗？

不，我在帖子里改了名字，让我再改一次，这样就不会混淆了

【参考方案1】：

以更适当的方式更新您的 formMapper.js

const mapForm = () => 
    // Code here

const mapUiFormToBackEnd = () => 
    // Code here

module.exports = mapForm, mapUiFormToBackEnd 

在你的 index.js 上

// If you just want the mapForm and mapUiFormToBackEnd
const mapForm, mapUiFormToBackEnd = require('./form-mapper/formMapper');

// Or if you just want to get all it's fucntion just import it like this
const FormMapper = require('./form-mapper/formMapper') // No need for *

// export the whole FormMapper
module.exports = FormMapper;

// If you want to export a specific functions inside FormMapper
module.exports = mapForm, mapUiFormToBackEnd 

【讨论】：

我编辑了我的帖子。 formMapper.js 存在于我的项目中，我从中导出 2 个函数，这就是为什么我使用 import * as FormMapper from './form-mapper/formMapper' 而不是 import FormMapper from './form-mapper/formMapper'

我尝试了您的建议，仍然收到错误消息。我会保留你的建议，因为它更干净

我在您的示例代码中看不到任何错误。那应该可以工作，我认为问题在于您导入它的方式，尝试使用 require 和 module.exports。我会更新我的答案

我刚刚尝试了 module.exports 仍然是同样的问题......我真的不知道发生了什么

我认为问题出在`src//form-mapper/formMapper.js`，因为我在创建npm包时一遍又一遍地尝试相同的方法，但我没有得到这样的错误