我正在尝试在 NPM 中发布一个用 React 制作的组件库。
我不希望它具有外部依赖项,甚至是 React 模块,以具有尽可能小的文件大小,因为用户将在应用程序中添加此依赖项。
我使用 npm
和 webpack
来管理依赖项。
这是我的
package.json
依赖项:"devDependencies": { "webpack": "^1.13.1", "webpack-dev-server": "^1.14.1", "webpack-merge": "^0.13.0", "babel-core": "^6.9.1", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "babel-preset-react-hmre": "^1.1.1", "react": "^15.0.2", "react-dom": "^15.0.2" }, "peerDependencies": { "react": "^15.0.2", "react-dom": "^15.0.2" }
在我的
webpack.config.js
文件中,我的入口点为“component.jsx”,输出为“lib.js”文件// Source code entry entry: { lib: './src/components/component.jsx' }, // Code Output output: { path: PATHS.build, filename: 'lib.js' },
我还在 React 模块中包含了“externals”属性,以避免 webpack 将其包含在“lib.js”输出中。
externals: { 'react': 'React', 'react-dom' : 'ReactDOM' }
最后,这是我想要发布的简单 React 组件:
import React from 'react'; export default class Component extends React.Component { constructor() { super(); } render() { return ( <h1>MY COMPONENT</h1> ); } }
我将其发布到 NPM 并将其安装在另一个项目中。当我尝试在 import React 语句后使用它时,它给我一个错误,指出 React 未定义 (bundle.js:28448 Uncaught ReferenceError: React is not Defined)
我的探测组件的代码:
import React from 'react'; import ReactDOM from 'react-dom'; import Component from 'component'; import $ from 'jquery'; ReactDOM.render( <Component />, $("#app") );
我是否缺少依赖项配置中的任何内容?
谢谢
最佳答案
Webpack externals
默认为您的 libraryTarget
。这意味着如果您不指定任何内容,它会将外部输出为 var
,并排除它是全局变量。
使用全局的 Webpack 输出:
/* 76 */
/***/ function(module, exports) {
module.exports = react;
/***/ },
您需要告诉它在已安装的模块中查找依赖项(以require
它)。为此,请将您的外部更改为:
所需更改(在 webpack.config 中):
externals: {
'react': 'commonjs react',
'react-dom' : 'commonjs react-dom'
}
然后它会使用commonjs输出它。
使用 commonjs 的 Webpack 输出:
/* 76 */
/***/ function(module, exports) {
module.exports = require('react');
/***/ },
请注意,我将您的外部更改回小写,因为该值应该是要查找的依赖项名称(在这种情况下为 react
和 react-dom
) .
(顺便说一下,如果你不想捆绑任何node_module,我建议使用 webpack-node-externals )
关于reactjs - 在 NPM 中发布 React 组件模块而不需要外部依赖的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37652934/