3

私の目標は、webpack を使用して ES6 で作成された反応コンポーネント ライブラリのモジュールを作成することです。

私は使っている：

  • webpack: "2.1.0-beta.25"
  • 反応：「15.4.1」

reactおよびを peerDependencies として割り当てる必要があるreact-domため、開発者によってダウンロードされません。

これは私の関連部分ですpackage.json：

"peerDependencies": {
  "react": "15.4.1"
},
"dependencies": {
  "chalk": "1.1.3",
  "compression": "1.6.2",
  "cross-env": "3.1.3",
  "immutable": "3.8.1",
  "invariant": "2.2.1",
  "lodash": "4.16.4",
  "minimist": "1.2.0",
  "sanitize.css": "4.1.0",
  "warning": "3.0.0",
  "react-onclickoutside": "5.8.3",
  "styled-components": "1.1.2",
  "classnames": "2.2.5"
},
"devDependencies": {
  "react": "15.4.1",
  "react-dom": "15.4.1",

https://webpack.github.io/docs/configuration.html#externalsおよびhttps://webpack.github.io/docs/library-and-externals.htmlによると、

次の構成を試しました：

1.

externals: {
  react: {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react'
  },
  'react-dom': {
    root: 'ReactDOM',
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom'
  }
},

2. 外部: { 反応: 'react', 'react-dom' : 'react-dom', }

3.

 externals: {
  react: 'React',
  'react-dom' : 'ReactDOM',
 }

4.

externals: {
  react: 'umd react',
  'react-dom' : 'umd react-dom'
}

5.

    externals: {
        // Use external version of React
        "react": "React",
        "react-dom": "ReactDOM"
    },

私はいつもこのエラーがあります:

 Dynamic page loading failed Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://bf.me/react-refs-must-have-owner).(…)

だから、ドキュメンテーションはそれについてあまり明確ではないのだろうか。

2017 年 12 月、最大で 2018 年 1 月、どうすれば同梱からReact除外できますか?ReactDOM

4

3 に答える 3

1

編集：

あなたの試した例ではこれを見ませんでした。OP が述べたように、次の JSON 構成は機能しませんでした。

GitHub issue #1275から、これを試してください:

{
    externals: {
        // Use external version of React
        "react": "React",
        "react-dom": "ReactDOM"
    }
}

それでもうまくいかない場合は、問題ページ全体を読んでみてください。あなたのために働くかもしれないいくつかの提案があります。

于 2016-12-27T17:36:25.767 に答える
0

1つの方法は、それらを別のファイルに入れることができreactjsます

  entry: {
      app:'./src/app.jsx',
      reactjs:[
          'react','react-dom'               ,
      ]
  }

  output: {
    path       : path.join(__dirname, 'public'),
    filename   : 'bundle.[name].js',
    publicPath : '/public/'
  },

 plugins : [
     new webpack.optimize.CommonsChunkPlugin({
        name: 'reactjs',
     })
 ]

これで、 webpack2 つのファイルbundle.app.jsとbundle.reactjs.js. それらをindex.html最初の反応、次にアプリに含めます。

于 2016-12-27T17:37:11.253 に答える