2016-10-26 18 views
0

webpack/webpack/.../multi-part-libraryの例に似たマルチパートライブラリを作成しました。私のアプリケーションでは、私はこのように私のライブラリの一部をインポートすることができるようにしたい:アプリケーションのためのwebpackにマルチパートライブラリを含めるにはどうすればいいですか?

ìmport Button from 'myLib/atoms/button'; 

// or 

import { Button } from 'myLib/atoms'; 

マイWebPACKの構成は次のようになりますと、私はエラー(Cannot resolve module 'myLib/atoms'またはCannot resolve module 'myLib/atoms/button')を取得:

module.exports = { 
    'entry': { 
     'app': './client.js', 
    }, 
    'output': { 
     'filename': 'bundle.js', 
    }, 
    'externals': { 
     'react': true, 
     'react-dom': true, 
     'myLib': true, 
    }, 
    'module': { 
     'loaders': [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel', 
      }, 
     ] 
    }, 
}; 
ライブラリの

WebPACKの構成は次のようになります。

const files = glob.sync('**/*.js', { 
    cwd: path.join(__dirname, 'atomic-design'), 
    absolute: true, 
}); 

let entries = {}; 

files.forEach((file) => { 
    const name = path.basename(path.dirname(file)); 
    const newName = `atoms/${name}`; 
    entries[newName] = file; 
}); 

module.exports = { 
    'entry': entries, 
    'output': { 
     'path': path.join(__dirname, 'lib'), 
     'filename': 'myLib.[name].js', 
     'library': ['myLib', '[name]'], 
     'libraryTarget': 'umd', 
     'umdNamedDefine': 'myLib', 
    }, 
    'externals': { 
     'react': true, 
     'react-dom': true, 
    }, 
    'module': { 
     'loaders': [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel' 
      }, 
     ] 
    } 
}; 

ファイルは、次のように構成されています

これまでのところ、ライブラリの小さな例しか使用しないwebpackでライブラリを作成するためのチュートリアルを見つけることができました。

ご協力いただきありがとうございます。

敬具、 JBrieske

答えて

0

は、私はあなたがresolve.modulesDirectoriesにインポートしようとしているモジュールのパスを追加します(それに応じてfrom 'path'を調整)する必要があると考えています。

関連ドキュメント:https://webpack.github.io/docs/configuration.html#resolve-modulesdirectories

this will change in Webpack2は、完全な機能であり、リリースに関するドキュメントが不足していることに注意してください。

関連する問題