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>

问题：

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

谢谢！

Answer 1

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

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

1：将组件库添加到babel-loader中包含的内容中。查看webpack module配置，您会看到src具体为include d（通过变量），您可以在那里添加库。

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

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

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

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

1 个答案: