与另一个项目一起开发 React 组件库（Webpack/Babel 问题）

Question

我正在建立一个开发环境，我希望能够在我的主应用程序中使用它们的同时开发一个 React 组件库。

我在我的应用程序目录中运行了npm link ../path/to/lib，并成功地将库符号链接到应用程序node_modules。但是，我似乎对如何设置 Babel 和/或 Webpack 以使代码能够正确转译有一些误解。请注意，库和主应用程序都是用 ES6 编写的，主应用程序是一个弹出的 Create-React-App 应用程序。

目前，该库的根目录中有一个 index.js 文件，它只是导出一个 React 组件：

export {default as Button} from './components/button/Button.jsx'

这是Button.jsx 的样子：

import React, { PropTypes } from 'react'
import classnames from 'classnames'

export default class Button extends React.Component {

    render() {

        let classes = classnames({
          'primary-button': true,
          'primary-button-': this.props.type == '',
          'primary-button': this.props.elevation == 2,
          'primary-button': this.props.elevation >= 3,
        });

        return (
            <a className={classes}>
                {this.props.children}
            </a>
        )
    }
}

我不确定是否需要它，但在尝试调试此问题时，我在库的根目录中添加了一个 .babelrc 文件：

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-class-properties"]
}

当我尝试将 Button 组件导入到我的主应用程序中的组件中时（使用 import {Button} from 'lib'），我收到以下错误：

Button.jsx Unexpected token (26:3)
You may need an appropriate loader to handle this file type.
| 
|       return (
|           <a className={classes}>
|                 {this.props.children}
|           </a>

问题：

1. 如何解决此错误？假设我的配置错误，我需要更改什么？库本身是否需要设置 Webpack？我需要更改主应用的 webpack 配置吗？
2. 虽然使用npm link 对库进行符号链接正确地将其添加到主应用程序node_modules 目录，但它不会将其附加到package.json。我怎样才能正确添加它？此功能在 2011 年提出请求，但尚未完全解决：https://github.com/npm/npm/issues/1166

谢谢！

Answer 1

使用默认的 Create React App webpack 配置，dependencies/node_modules 不会被提供给 babel，它假定依赖项导出了一个转译的构建。

有两种方法可以解决此问题：

1：将你的组件库添加到 babel-loader 中包含的内容中。查看 webpack 的 module 配置，您会看到 src 专门为 included（通过变量），您将在那里添加您的库。

这是短期内比较容易的解决方案

2：导出转译的组件。为您的组件库设置一个构建过程，为每个 Babeled 组件创建一个 dist 版本，并将您的 index.js 指向这些组件。

从长远来看，这可能更容易，因为它将使您的库更便携，并且您可以轻松地开源它或在许多项目中使用它，而无需更改每个项目的配置。