在React组件中导入模块以在NPM上发布

Question

这是我第一个要在NPM中发布的React组件。 我使用Yeoman的 react-webpack-component软件包开始我的项目。 但是，当我将组件安装并导入到React应用程序时，出现了错误：

Failed to compile.

Error in ./~/kladrapi-react/index.js
Module not found: [CaseSensitivePathsPlugin] `/develop/myproject/node_modules/kladrapi-react/node_modules/React/react.js` does not match the corresponding path on disk `react`.

 @ ./~/kladrapi-react/index.js 1:82-98

我了解此错误，但不了解如何将React模块正确导入我的组件！

GitHub上的实际版本

Answer 1

我认为您的代码中存在多个问题。

在index.html ：

@ line-- <script src="kladrapi-react.js"></script>

1. 文件名是“ kladrapi-react.jsx”，而不是“ kladrapi-react.js”。

2. 第二个问题，在这里您期望“ kladrapi-react.js（x）”处于根目录级别。 事实并非如此。 根据您的文件夹结构，“ kladrapi-react.js（x）”文件位于./lib/kladrapi-react.jsx。

除此之外，您还可以在kladrapi-react.js（x）文件中混合使用ES5和ES6语法。 您正在index.html中访问变量KladrapiReact ，但尚未将其导出为“ KladrapiReact”。 我建议您将'React.createClass....'代码放在单独的组件中。

对于您收到的错误，您需要使用“区分大小写的路径-webpack-plugin”：

该Webpack插件将强制所有必需模块的整个路径与磁盘上实际路径的确切情况相匹配。

npm install --save-dev case-sensitive-paths-webpack-plugin

用法：

var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');

var webpackConfig = {
    plugins: [
        new CaseSensitivePathsPlugin()
        // other plugins ...
    ]
    // other webpack config ...
}

有关此插件的更多信息，请阅读此处的文档。

Answer 2

找不到模块：[CaseSensitivePathsPlugin] /develop/myproject/node_modules/kladrapi-react/node_modules/React/react.js与磁盘react上的相应路径不匹配。

@ ./~/kladrapi-react/index.js