我正在尝试在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'
},
>我还在反应模块中包含了“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并将其安装在另一个项目中.当我在导入React语句后尝试使用它时,它给出了一个错误,指出React未定义(bundle.js：28448 Uncaught ReferenceError：React未定义)
>我的代码探测组件：
import React from 'react';
import ReactDOM from 'react-dom';
import Component from 'component';
import $from 'jquery';
ReactDOM.render(
<Component />,$("#app")
);
我在依赖项配置中遗漏了什么吗？
谢谢
Webpack外部默认为您的libraryTarget.这意味着如果您没有指定任何内容,它将输出外部作为var,并将其expcts为全局变量.
使用全局的Webpack输出：
/* 76 */
/***/ function(module,exports) {
module.exports = react;
/***/ },
您需要告诉它在已安装的模块中查找依赖项(要求它).为了做到这一点,将你的外部变为：
必需的更改(在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)
