React - 如何使用npm链接模块

时间:2018-04-23 20:54:21

标签: reactjs webpack babel npm-link

如何使用通过

导入的模块
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";

我收到了错误

1 个答案:

答案 0 :(得分:0)

导入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)

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

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

现在让我们改变index.js

中的导出
export default from './MyModule.js`

现在控制台日志将输出

object = class Esterno {}

所以你错过了导出/导入*default之间的区别默认是默认模块,而*是模块内所有导出的对象。