reactjs – 在没有外部依赖关系的情况下在NPM中发布React组件模块的正确方法是什么？

我正在尝试在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输出：

/* 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');

/***/ },

参考webpack docs here.

请注意,我将您的外部更改回小写,因为该值应该是要查找的依赖项名称(在这种情况下,react和react-dom).

(顺便说一句,如果你不想捆绑任何node_module,我推荐使用webpack-node-externals)

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!