2017-07-14 30 views
0

私はmobxでスライダを行い、webpack 3を使ってバンドルしました。 "externals"を使ってスライダのバンドルからmobxを除外しました。それから、パッケージとして公開し、mobx-sandboxを作成し、そこでスライダーをインストールしました。 パッケージがmobxをインポートできないため、結果がエラーになります。 しかし、私はそれをサンドボックスページにインポートしたので、スライダーがmobxを見つけることを期待しています。私の細工されたモジュールでモジュールをインポートできません

Iはまた、コンソールで受信:

[mobx]警告:アクティブ複数mobx場合があります。 これは予期しない結果につながる可能性があります。

私は何が欠けていますか?

スライダーのwebpack.config

var path = require('path'); 
var webpack = require('webpack'); 


module.exports = { 
    node: { 
     fs: "empty" // https://github.com/josephsavona/valuable/issues/9 
    }, 
    devtool: 'source-map', 
    entry: { 
     bundle: [ "./src/index.js" ] 
    }, 
    output: { 
     path: path.join(__dirname, "lib"), 
     filename: "index.js" 
    }, 
    externals: { 
     'react': { 
      root: 'React', 
      commonjs2: 'react', 
      commonjs: 'react', 
      amd: 'react' 
     }, 
     'react-dom': { 
      root: 'ReactDOM', 
      commonjs2: 'react-dom', 
      commonjs: 'react-dom', 
      amd: 'react-dom' 
     }, 
     'mobx': { 
      root: 'mobx', 
      commonjs2: 'mobx', 
      commonjs: 'mobx', 
      amd: 'mobx' 
     }, 
     'mobx-react': { 
      root: 'mobx-react', 
      commonjs2: 'mobx-react', 
      commonjs: 'mobx-react', 
      amd: 'mobx-react' 
     } 
    }, 
    stats: { 
     colors: true, 
     reasons: true 
    }, 
    resolve: { 
     extensions: ['.js'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /\/node_modules\//, 
       loader: 'babel-loader', 
       query: { 
        cacheDirectory: true 
       } 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoEmitOnErrorsPlugin() 
    ] 
}; 

スライダーの.babelrc

{ 
    "presets": ["es2015", "react", "stage-0"], 
    "plugins": ["transform-decorators-legacy"] 
} 

スライダーリポジトリ: https://github.com/andiwilflly/rslider

サンドボックスリポジトリ: https://github.com/SkunSHD/rslider-test-sandbox

+0

私は([ここ]を考え出しhttps://yarnpkg.com/lang/en/docs/dependency-types/ )私は 'peerDependencies'を使う必要があるが、それは役に立たなかった。だから私は探し続けている... – Curious

答えて

0

umdのインポートがバンドルされていないという問題がありました。 webpack.config

出力のこの行が正常にバンドル内のモジュールをインポートするのに役立った

module.exports = { 
    ... , 
    output: { 
     ... , 
     libraryTarget: 'umd' 
    } 
} 
関連する問題