與另一個項目（Webpack/Babel問題）一起開發React組件庫

我正在設置一個開發環境，我希望在我的主應用程序中使用它們的同時開發一個React組件庫。與另一個項目（Webpack/Babel問題）一起開發React組件庫

我在我的應用程序目錄中運行了npm link ../path/to/lib，併成功將庫鏈接到應用程序node_modules。但是，我似乎對Babel和/或Webpack需要如何設置以使代碼正確轉譯有些誤解。請注意，庫和主應用程序都是用ES6編寫的，主應用程序是彈出的Create-React-App應用程序。

目前，該圖書館有一個index.js文件在它的根簡單地導出一個陣營組成：

export {default as Button} from './components/button/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

謝謝！

來源

2017-09-02 Orbit

似乎設置babel-loader來處理jsx時出現了問題。主應用程序webpack配置是否也是用create-react-app創建的？ –

主要應用程序是彈出的create-react-app應用程序，我沒有修改webpack配置。該圖書館沒有安裝webpack。 – Orbit

請發佈您的webpack配置。你需要一個加載器來處理'.jsx'文件，就像處理'.js'文件一樣。 – Derek

使用默認的Create React App webpack配置，依賴關係/ node_modules不會被提供給babel，而是假定依賴關係導出了一個轉譯的構建。

有兩種方法可以解決這個問題：

1：您的組件庫添加到什麼是包含在通天裝載機。看看webpack module配置，你會看到src是專門爲include d（通過一個變量），你會在那裏添加你的庫。

這在短期

2的簡單的解決方案：出口transpiled組件。爲您的組件庫設置一個構建過程，爲每個Babeled組件創建dist版本，並將index.js指向這些組件。

從長遠來看，這可能會更容易一些，因爲它會使您的庫更具可移植性，並且您可以輕鬆地開源或在許多項目中使用它，而無需更改每個項目的配置。

來源

2017-09-03 01:48:16

我最終使用了第二個選項，並設置了一個構建腳本，該腳本運行'babel lib -w -d build --copy-file'，模塊入口點指向'/ build'內的'index.js'文件目錄。符號鏈接後，這是一個偉大的工作流程！編譯代碼_before_將其包含在另一個項目中是否正常？ – Orbit

在公開發布到npm之前進行轉換是標準做法（這就是爲什麼標準webpack配置從babel加載器中排除node_modules的原因），所以這可能是一個好方法。 –

與另一個項目（Webpack/Babel問題）一起開發React組件庫

回答

相關問題