使用命名空间导入React组件

时间:2018-06-06 10:24:53

标签: javascript node.js reactjs npm ecmascript-6

我的反应组件的结构如下。

/build
    ..............................
/lib
    /inner
        /InnerComponent.js
        /index.js
    /OuterComponent1.js
    /OuterComponent2.js
    /index.js
.................................
package.json
.................................

我的package.json如下所示

 {
      "name": "my-comp",
      .......................
      "main": "build/index.js",
      "scripts": {
        "build": "babel lib -d build",
        "build:watch": "babel lib -w -d build",
        "lint": "eslint lib/**; exit 0",
        "lint:watch": "esw -w lib/**",
        "prepublish": "npm run build"
      },
      "devDependencies": {
          .......................
      },
      "dependencies": {
          .......................
      },
      "directories": {
        "lib": "lib"
      },
      "repository": {
          .......................
      }
    }

OuterComponent1OuterComponent2可以从lib/index.js导入import {OuterComponent1,OuterComponent2} from "my-comp"。我需要将lib/inner中的所有内容导入import {InnerComponent} from "my-comp/inner"(我想为lib/inner文件夹中的组件添加命名空间)。在npm发布后我该怎么做?

1 个答案:

答案 0 :(得分:0)

您可以从inner/index.js创建命名导出,如下所示:

export { InnerComponent } from './InnerComponent';

然后允许导入使用:

import { InnerComponent } from 'my-comp/inner';