在React文件中包含NPM模块:Webpack无法parsing
根据我在这里和这里阅读的内容,将反应模块发布到NPM,然后在另一个项目中使用它,而组件本身位于node_modules
导向器中的方式应该如下所示
- 写一个模块,然后导出它
-
package.json
本名填写package.json
的main
属性,在我的例子中是dist/index.js
-
npm install
从你想要包含它的项目npm install
它 - 从服务器静态地提供脚本。
- 我有看起来像这样的服务于js文件的东西:
app.use('public/componentA', express.static(path.join('node_modules', 'componentA'));
- 这不是完全真实的代码,但它的工作原理,如果我加载它,我可以在浏览器中看到JS。
- 我有看起来像这样的服务于js文件的东西:
- 需要组件
index.js
var React = require('react'); var Component = require('../public/componentA/'); var hook = document.getElementById('hook'); React.render(Component, hook);
但是,当我尝试webpack这个我得到的错误
./lib/index.js中的错误找不到模块:错误:无法parsing/ Users / me / Documents / tests / reactcomponenttest / lib目录中的“./public/componentA”
这是什么阻止我使用我的模块? 我认为public
目录除了特定的端口以外不可用。 如果是这种情况,我们如何使用第二个链接中的节点use
build议?
你必须要求模块的名字。 如果你发布了名为componentA
的模块,写下如下的代码: var Component = require('componentA');
第4步根本没有必要。 Webpack将您所有的JavaScript文件打包成一个文件。 所以如果你require('componentA')
它基本上将componentA的dist/index.js
的内容复制到最终的bundle.js
。
最后你只需要提供bundle.js
。