node.js - 与另一个项目一起开发 React 组件库(Webpack/Babel 问题)

Question

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

我已在应用程序目录中运行 npm link ../path/to/lib 并成功将库符号链接(symbolic link)到应用程序 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 对库进行符号链接(symbolic link)可以将其正确添加到主应用程序 node_modules 目录中，但它不会将其附加到 package.json 中。我怎样才能正确添加它？此功能于 2011 年提出请求，但尚未完全解决:https://github.com/npm/npm/issues/1166

谢谢!

Answer 1

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

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

1:将您的组件库添加到 babel-loader 中包含的内容中。查看 webpack module 配置，您会看到 src 特别是 included (通过变量)，您可以在其中添加您的库。

这是短期内更简单的解决方案

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

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