React Applicationで消費できるWebpackライブラリの作成方法は？

Question

ReactJSで使用できるWebpackライブラリES6を作成するにはどうしたらいいですか？同様

-----lib.js----- 
export function sum(a , b) { 
    return a + b; 
}; 

export function multiply(a, b) { 
    return a * b; 
}; 

私は次のようにimport文を使用して消費したい： - 私は

export default() => (
    { 
     entry: './src/lib.js', 
     output: { 
      path: './dist', 
      filename: 'lib.js', 
      libraryTarget: 'umd', 
      library: 'lib' 
     }, 
     module: { 
      rules: [ 
       {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"} 
      ] 
     }, 
    } 
); 

.babelrcファイルをwebpack.config.babel.jsとして、以下の使用しています

import lib from './lib'; 
console.log(lib.sum(3,5)); 

は、次の設定が含まれています

{ 
    "presets": ["es2015"] 
} 

のpackage.json内容

{ 
    "name": "lib", 
    "version": "1.0.0", 
    "description": "", 
    "main": "dist/lib.js", 
    "scripts": { 
    "build:lib": "webpack" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.24.0", 
    "babel-loader": "^6.4.1", 
    "babel-preset-es2015": "^6.24.0", 
    "babel-preset-es2015-webpack": "^6.4.3", 
    "webpack": "^2.2.1" 
    } 
} 

Answer 1

すべてが、このファイルで定義されているすべての機能をインポートするためにこれを使用し、インポートする方法以外に、適切である：

import * as lib from './lib'; 

今、あなたはlib.sum(1,2);で任意の関数を使用することができます

理由：：多くの関数をエクスポートしているので、各関数を別々にインポートするか、*を使用してすべてをインポートする必要があります。

代替方法：

module.exports = { 
    sum: function(a,b){ 
     return a + b; 
    }, 

    multiply: function(a,b){ 
     return a * b; 
    } 
} 

インポートすることで、このファイル：

import Lib from "lib"; 

今すぐlib.sum(1,2);

でそれを使用lib.jsファイル、多くの方法をエクスポートする

使用module.exports

参考：物事のhttps://danmartensen.svbtle.com/build-better-apps-with-es6-modules

Answer 2

カップルが飛び出し：あなたはすべてをエクスポートする場合

• は、あなたもすべてをインポートする必要があります。

  import * as lib from './lib'; 
  

  （@MayankShuklaによって削除された答えで述べたように）

• output.pathmust be absolute：

  あなたが別のパッケージには、あなたのライブラリのコードを持っている場合、あなたのライブラリーの

  output: { 
      path: path.resolve(__dirname, 'dist'), 
      // ...