javascript - 在 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 模块导入我的组件!

Actual version on 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 语法。您正在访问变量 KladrapiReact在index.html但您尚未将其导出为“KladrapiReact”。我建议您输入'React.createClass....'代码在一个单独的组件中。

对于您收到的错误，您需要使用“case-sensitive-paths-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 ...
}

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