Question

我尝试使用一些React组件创建一个npm包，这些组件几乎用于我的所有项目。这是文件夹结构和文件内容：

/
- DIST /
  - bundle.js
- 的src /
  - MyComponent.jsx
  - index.js
- 的package.json
- webpack.config.js

MyComponent.jsx

import React, { Component } from 'react';

class MyComponent extends Component {
    render() {
        return (
            <p>Hello, world!</p>
        );
    }
}

export default MyComponent;

index.js

// eventually there will be more components imported/exported here
import MyComponent from './MyComponent.jsx';
exports.MyComponent = MyComponent;

webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: {
        path: './dist',
        filename: 'bundle.js'
    },
    // some loaders...
};

的package.json

{
    "name": "my-library",
    "files": [
        "dist",
        "src"
    ],
    "main": "dist/bundle.js",
    // the usual stuff...
}

这是我对这个过程的理解。首先，我用webpack构建src文件。这将查看/src/index.js，导入MyComponent类，然后将其导出，使其可用作MyComponent。这全部添加到/ dist。

中的bundle.js文件中

接下来，我使用npm pack打包模块。这将创建一个包含/ src和/ dist目录的存档文件。

然后我转到我的其他项目并运行npm install ../path/to/archive/file。这会将模块添加到我的node_modules目录中。问题是，当我尝试导入并使用MyComponent ...

时

import React, { Component } from 'react';
import MyComponent from 'my-library';

class App extends Component {
    render() {
        console.log(<MyComponent />);
        return (
            <MyComponent />
        );
    }
}

export default App;

...并渲染该组件，我收到此警告和错误：

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `App`.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.

console.log的输出是一个React对象，但类型是Object，这似乎是警告所暗示的（我猜它应该是一个字符串）。

知道我错过了什么吗？

修改

嗯，我离我更近了。我在我的webpack配置中添加了库选项：

output: {
    library: 'my-library',
    libraryTarget: 'umd'
}

...然后我就可以使用这样的组件：

import MyLibrary from 'my-library';
const MyComponent = MyLibrary.MyComponent;

但我不想为每个组件做到这一点。我的目标是：

import { MyComponent, MyOtherComponent } from 'my-library';

Answer 1

您必须从组件index.js文件中导出组件，如下所示

$dir = public_path('files/MyDir');
$files =  scandir ($dir);
$match = "Hello";
$match_files = array();
foreach ($files as $file) {
  if((stripos($file, $match) !== false)
    $match_files[]=$file;
}
print_r($match_files);

然后在您的主项目中，使用

导入它们

import MyComponent from './MyComponent.jsx';
import MyOtherComponent from './MyOtherComponent.jsx';
export {
    MyComponent,
    MyOtherComponent
}

如何使用本地npm包中的React组件

1 个答案: