2017-07-14 145 views
0

我在mobx上做了一个滑块,并使用webpack 3对其进行了捆绑。我使用“外部”从滑块的捆绑包中排除了mobx。然后我将它作为包发布,创建了一个mobx-sandbox并在那里安装了滑块。 结果我收到一个错误,因为包无法导入mobx。 但我期待那个滑块会找到mobx,因为我将它导入沙箱页面。无法在我制作的模块中导入模块

我还接收在控制台:

[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' 
    } 
}