のWebPACKとES6モジュールのtranspilationした後、モジュール

Question

を輸出していない私は、輸出の文を持ってsrcバージョンではhere

可能な小型パッケージをIを開発した：

export class Select extends React.Component { 
    render() { 
     return (
     ...the component 
     ) 
    } 
} 

私はこのコンポーネントを使用しますこのフォームは、私はそうのようにそれをインポートすることができます。

import {Select} from 'select-react-redux';

をしかし、私は、pをバンドルした後、 webpackを使ってlibディレクトリに転送すると、元のファイルと同じ内容の出力ファイルが得られますが、ES6ではなくES5となります。

添付ファイルには、 var Select = exports.Select = function (_React$Component) {} が含まれています。つまり、選択コンポーネントは私には利用可能であるが、そうではありません。

ご協力いただければ幸いです。あなたはそれがあるとしてパッケージを使用するために適切なローダーが必要になりますsrc/index.jsでコードをES6たので

"main": "src/index.js", 

：package.jsonで

Answer 1

は、私はあなたのpackage's entry pointは以下のように定義されていることを参照してください。しかしあなたのwebpack設定を調べると、すでにコードが変換されていることがわかりましたlib/index.js。だから、としてあなたのパッケージのエントリポイントを指定する必要があります。

"main": "lib/index.js" 

Answer 2

あなたの輸出書類があるべきこのことができます以下の

export default class Select extends React.Component { 
    render() { 
     return (
     ...the component 
     ) 
    } 
} 

//import 

import Select from 'select-react-redux' 

または

class Select extends React.Component { 
     render() { 
      return (
      ...the component 
      ) 
     } 
    } 

export { 
    Select, 
} 

//import 
import {Select} from 'select-react-redux' 

希望のいずれか！

Answer 3

ありがとうございました。彼らはどちらも正しいですが、彼らは私のために問題を解決しませんでした。私はこの問題の解決に2日を費やしていましたが、これはウェブパックの問題であると確信しています。同じソースファイルを使用するが、babelを使用してモジュールをコンパイルすると、正しくエクスポートされます。

babel src/ -d lib/

また、私はindex.jsファイルにlibフォルダのルートに、このようなエクスポートオプションと一緒に行きました。このようにすると、コンポーネントを追加するとモジュラーになります

import {Select} from './Select'; 
export {Select as Select};