reactjs - React - 如何使用 npm 链接模块

Question

如何使用通过导入的模块

npm link

进入 webpack 的 React 应用程序？

MyModule_Folder
---------------------------------
    |--package.json
    |--src
        |--myModule
            |--MyComponent.jsx
            |--MyStyle.css
            ...
    |--public
        |--index.html

App
---------------------------------
    |--package.json
    |--src
        ...

MyModule/package.json 是这样的

{
    "name": "@mymodule/external",
    "version": "1.0.0",
    "main": "src/index.jsx",
    "babel": {
        ...
    },
    "devDependencies": {
        ...
    },
    "dependencies": {
        ...
    },
    "scripts": {
        ...
    }
}

我打了

cd <path_to_MyModule_Folder>
npm link
cd <path_to_MyReactApp>
npm link @mymodule/external

如果我以这种方式导入我的模块

import { MyModuleClass } from "@mymodule/external";

我有一个错误

Answer 1

你有错误的导入导出 MyModule

MyModule.js

import React from 'react'

export function helloWorld() {}

Class Esterno extends React.Component {
  render() { ..... }
}

export default Esterno

index.js

export * from './MyModule.js'

现在想象一下它的用法

import Esterno from 'mymodule'

console.log(Esterno)

您现在正在导入模块 (*) 的所有内容，因此 otuput 将是

object = {
 helloWorld: function() {}
 default: class Esterno {}
}

现在让我们改变出口index.js

export default from './MyModule.js`

现在控制台日志将输出

object = class Esterno {}

因此您缺少导出/导入之间的区别*，default默认是默认模块，并且*是模块内所有导出的对象。