Question

我正在尝试使用React和Webpack（3.4.1）构建一个“组件库”。我们的想法是使用一个React应用程序，使用React Cosmos，以交互方式构建和探索可重用组件的“库”。该repo还将具有build任务，该任务仅将这些组件编译成可以向上推送的文件（到Github和/或NPM）。并且可以将该文件/包导入到其他项目中以访问可重用组件。

注意/更新 - 对于那些想要自己尝试的人，我已经将（非功能性）包发布到NPM：https://www.npmjs.com/package/rs-components。只需yarn add您的项目（可能）遇到相同的问题。

我有90％的工作 - React Cosmos正确显示组件，我的构建任务（rimraf dist && webpack --display-error-details --config config/build.config.js）正在运行而没有错误。但是，当我将repo从Github作为包中拉入另一个项目时，我遇到了错误。

错误似乎源于Webpack没有正确导入组件库的依赖关系。当我没有在构建时缩小/破坏库时，我在导入时看到的第一个错误是：

TypeError: React.Component is not a constructor

事实上，如果我投入调试器并检查它，React就是一个空对象。

如果我通过（作弊）直接在node_modules（const React = require('../../react/react.js')）中编译/下载的文件中导入React来解决这个问题，那么该错误就不会发生，但是我遇到了类似的，与prop-types库导入失败有关：

TypeError: Cannot read property 'isRequired' of undefined

所以看起来，当我的代码被正确拉入时，组件库文件中的导入似乎没有被正确捆绑。

以下是大部分相关文件：

配置/ build.config.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const config = {
  entry: path.resolve(__dirname, '../src/index.js'),
  devtool: false,
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].js'
  },
  resolve: {
    modules: [
      path.resolve(__dirname, '../src'),
      'node_modules'
    ],
    extensions: ['.js']
  },
  module: {
    rules: []
  }
};

// JavaScript
// ------------------------------------
config.module.rules.push({
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: [{
    loader: 'babel-loader',
    query: {
      cacheDirectory: true,
      plugins: [
        'babel-plugin-transform-class-properties',
        'babel-plugin-syntax-dynamic-import',
        [
          'babel-plugin-transform-runtime',
          {
            helpers: true,
            polyfill: false, // We polyfill needed features in src/normalize.js
            regenerator: true
          }
        ],
        [
          'babel-plugin-transform-object-rest-spread',
          {
            useBuiltIns: true // We polyfill Object.assign in src/normalize.js
          }
        ]
      ],
      presets: [
        'babel-preset-react',
        ['babel-preset-env', {
          targets: {
            ie9: true,
            uglify: false,
            modules: false
          }
        }]
      ]
    }
  }]
});

// Styles
// ------------------------------------
const extractStyles = new ExtractTextPlugin({
  filename: 'styles/[name].[contenthash].css',
  allChunks: true,
  disable: false
});

config.module.rules.push({
  test: /\.css$/,
  use: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]'
});

config.module.rules.push({
  test: /\.(sass|scss)$/,
  loader: extractStyles.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          sourceMap: false,
          minimize: {
            autoprefixer: {
              add: true,
              remove: true,
              browsers: ['last 2 versions']
            },
            discardComments: {
              removeAll: true
            },
            discardUnused: false,
            mergeIdents: false,
            reduceIdents: false,
            safe: true,
            sourcemap: false
          }
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          autoprefixer: {
            add: true,
            remove: true,
            browsers: ['last 2 versions']
          },
          discardComments: {
            removeAll: true
          },
          discardUnused: false,
          mergeIdents: false,
          reduceIdents: false,
          safe: true,
          sourceMap: true
        }
      },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: false,
          includePaths: [
            path.resolve(__dirname, '../src/styles')
          ]
        }
      }
    ]
  })
});
config.plugins = [extractStyles];

// Images
// ------------------------------------
config.module.rules.push({
  test: /\.(png|jpg|gif)$/,
  loader: 'url-loader',
  options: {
    limit: 8192
  }
});

// Bundle Splitting
// ------------------------------------
const bundles = ['normalize', 'manifest'];

bundles.unshift('vendor');
config.entry.vendor = [
  'react',
  'react-dom',
  'redux',
  'react-redux',
  'redux-thunk',
  'react-router'
];

config.plugins.push(new webpack.optimize.CommonsChunkPlugin({ names: bundles }));

// Production Optimizations
// ------------------------------------
config.plugins.push(
  new webpack.LoaderOptionsPlugin({
    minimize: false,
    debug: false
  }),
  new webpack.optimize.UglifyJsPlugin({
    sourceMap: false,
    comments: false,
    compress: {
      warnings: false,
      screw_ie8: true,
      conditionals: true,
      unused: true,
      comparisons: true,
      sequences: true,
      dead_code: true,
      evaluate: true,
      if_return: true,
      join_vars: true
    }
  })
);

module.exports = config;

示例组件：

Checkbox.js

import React from 'react';
import { connect } from 'react-redux';
import { map } from 'react-immutable-proptypes';
import classnames from 'classnames';

import { setCheckboxValue } from 'store/actions';

/**
 * Renders a Redux-connected Checkbox with label
 *
 * @param {string} boxID - Unique string identifier of checkbox
 * @param {string} name - Label text to display
 * @param {function} dispatch - Redux dispatch function
 * @param {Immutable.Map} checkboxes - Redux checkboxes Map
 * @param {string[]} className - Optional additional classes
 *
 * @returns {React.Component} A checkbox with globally-tracked value
 */
export function CheckboxUC ({ boxID, name, dispatch, checkboxes, className }) {
  const checked = checkboxes.get(boxID);
  return (
    <label className={ classnames('checkbox rscomp', className) } htmlFor={ boxID }>
      <input
        className="checkable__input"
        type="checkbox"
        onChange={ () => {
          dispatch(setCheckboxValue(boxID, !checked));
        } }
        name={ name }
        checked={ checked }
      />
      <span className="checkable__mark" />
      <span className="checkable__label">{ name }</span>
    </label>
  );
}

const mapStateToProps = state => ({
  checkboxes: state.checkboxes
});

const { string, func } = React.PropTypes;
CheckboxUC.propTypes = {
  boxID: string.isRequired,
  name: string.isRequired,
  checkboxes: map.isRequired,
  dispatch: func,
  className: string
};

export default connect(mapStateToProps)(CheckboxUC);

Webpack构建任务（webpack --config config/build.config.js）的“entry”文件，该文件仅用于导出导入此软件包的应用程序应该可访问的组件：

的src / index.js

import BaseForm from 'components/BaseForm';
import Checkbox from 'components/Checkbox';
import Dropdown from 'components/Dropdown';
import Link from 'components/Link';
import RadioGroup from 'components/RadioGroup';

import { validators } from 'components/BaseForm/utils';

export default {
  BaseForm,
  Checkbox,
  Dropdown,
  Link,
  RadioGroup,
  utils: {
    validators
  }
};

最后，这里是编译的未使用JS中的行，它们“导入”看似不正确的变量：

var React = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_prop_types__ = __webpack_require__(3);

让我知道是否有任何其他方法可以帮助解决这个问题。超级困惑，所以我非常感谢任何帮助。

谢谢！

修改

似乎可以正确导入一堆做。当我在编译文件中抛出调试器并查看__webpack_require__(n)尝试一大堆不同的n时，我看到了不同的导入模块。不幸的是，React和PropTypes似乎不在其中。

Answer 1

尝试将您的条目更改为：

entry: { 'bundle': path.resolve(__dirname, '../src/index.js')}

你的CommonsChunkPlugin配置为：

config.plugins.push(new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }));

然后在vendor.js文件中查看供应商条目下的内容。

如果您的目标是将所有内容放在一个文件中，那么请忽略CommonsChunkPlugin。

Webpack包导入空依赖项对象

1 个答案: