reactjs - 在 NPM 中发布 React 组件模块而不需要外部依赖的正确方法是什么？

Question

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

我是否缺少依赖项配置中的任何内容？

谢谢

Answer 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 )