2017-07-14 71 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' 
    } 
}