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

【问题标题】：what is the proper way to publish a React component module in NPM without external dependencies inside?在没有外部依赖的情况下在 NPM 中发布 React 组件模块的正确方法是什么？
【发布时间】：2016-10-05 19:06:11
【问题描述】：

我正在尝试在 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")
);

我是否遗漏了依赖项配置中的任何内容？

谢谢

【问题讨论】：

什么版本的 npm？

标签： reactjs npm dependencies components

【解决方案1】：

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

/***/ },

参考webpack docs here。

请注意，我将您的外部变量改回小写，因为该值应该是要查找的依赖项名称（在这种情况下，react 和 react-dom）。

（顺便说一句，如果你不想捆绑任何node_module，我建议使用webpack-node-externals）

【讨论】：

我已经按照您所说的进行了更改，但在以下位置出现错误：module.exports = require('react');说 lib.js:8166 Uncaught ReferenceError: require is not defined
是的，我已经更改了添加 commonjs 前缀的外部选项
我没有在“输出”配置中定义“库”和“库目标”，可能是这个问题吗？
什么时候出现这个错误？您可以尝试将“libraryTarget”：“umd”添加到输出配置吗？
加载“lib.js”文件时出现错误，最后它有一个 /***/ function(module, exports) { module.exports = require("React" ); /***/ } 产生错误

【解决方案2】：

您正在将输出文件设为lib.js，但在渲染时您正在阅读bundle.js。请将任一输出文件重命名为 bundle.js 或在您的 index.html 中包含 lib.js 以代替包含 bundle.js。

【讨论】：

对不起，我不解释清楚，bundle.js是应用程序消耗组件模块的编译文件，名称不同。

【解决方案3】：

我写了一个完整的 Medium 故事，因为我和你有同样的问题，但没有关于它的信息。看看吧：https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce

主要修复是在 webpack.config.js 文件中添加外部'react': 'commonjs react'

【讨论】：