Question

我正在尝试在NPM中发布一个用React制作的组件库。

我不希望它具有外部依赖项，甚至是React模块，以使文件大小最小，并且因为用户将在应用程序中添加此依赖项。

我正在使用class App extends React.Component { render() { return <div>Hello, world</div>; } }和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" }文件中，我将入口点设为'component.jsx'并输出为'lib.js'文件
```
webpack.config.js
```

我还在反应模块中加入了“externals”属性，以避免webpack包含在'lib.js'输出中。

// Source code entry
entry: {
  lib: './src/components/component.jsx'
},

// Code Output 
output: {
  path: PATHS.build,
  filename: 'lib.js'
},

最后，这是我想发布的简单React组件：

externals: {
  'react': 'React',
  'react-dom' : 'ReactDOM'
}

我将它发布到NPM并将其安装在另一个项目中。当我在导入React语句后尝试使用它时，它给出了一个错误，指出React未定义（bundle.js：28448 Uncaught ReferenceError：React未定义）

我的代码探测组件：

import React from 'react';

export default class Component extends React.Component {

  constructor() {
    super();
  }

  render() {
    return (
      <h1>MY COMPONENT</h1>
    );
  }
}

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

由于

Answer 1

Webpack set encoding utf8 set term x11 set terminal pngcairo dashed nocrop size 640,560 enhanced solid color font 'Helvetica,12' butt dashed set output "E_vs_eta_big_N4.png" set multiplot set lmargin screen 0.20 set rmargin screen 0.85 set bmargin screen 0.25 set tmargin screen 0.90 set hidden3d set pm3d map #set palette rgbformulae 33,13,10 #set samples 50, 50 #set isosamples 50, 50 set xrange [ -3 : 3 ] set yrange [ -3 : 3 ] #set cbrange [ 0 : 1.000 ] #set cbtics -0.25,0.25,1 set cblabel "{/Symbol h}" unset xtics unset ytics unset key splot "gfock_pair_correlation_N4_L0.txt" u 1:2:6 unset pm3d set lmargin screen 0.10 set rmargin screen 0.20 set ytics set yrange [ -3.00 : 3.00 ] set ylabel "y" unset xlabel set xrange [*:*] set surface plot "gfock_pair_correlation_N4_L0.txt" u 6:2 w lines lc rgb "green" set lmargin screen 0.20 set rmargin screen 0.85 set bmargin screen 0.15 set tmargin screen 0.25 set xrange [ -3.00 : 3.00 ] set yrange [ * : * ] unset ylabel set xlabel "x" set xtics unset ytics plot "gfock_pair_correlation_N4_L0.txt" u 1:6 unset multiplot set term x11默认为您的externals。这意味着如果你没有指定任何东西，它会将外部输出为libraryTarget，并将其作为全局变量exepcts。

使用全局的Webpack输出：

var

您需要告诉它在已安装的模块中查找依赖关系（到/* 76 */ /***/ function(module, exports) { module.exports = react; /***/ },它）。为了做到这一点，将你的外部变为：

必要的更改（在webpack.config中）：

require

然后它将使用commonjs输出它。

使用commonjs输出Webpack：

externals: {
  'react': 'commonjs react',
  'react-dom' : 'commonjs react-dom'
}

参考webpack docs here。

请注意，我将您的外部更改回小写，因为该值应该是要查找的依赖项名称（在这种情况下，/* 76 */ /***/ function(module, exports) { module.exports = require('react'); /***/ },和react）。

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

Answer 2

您正在将输出文件设为lib.js，但在渲染时您正在阅读bundle.js。请将输出文件重命名为bundle.js，或在lib.js中包含index.html，而不是bundle.js。

Answer 3

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

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

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

3 个答案: