スクリプトタグのcdnからReactがロードされているときにWebpackを設定します。

Question

cdnのスクリプトタグを使ってReactとReactDOMをロードしたい状況があります。

これを動作させるには、Webpack（ "webpack"： "^ 3.8.1"）に、Reactが必要なものを翻訳しないようにする必要があります。私は束縛していないことを考えると、彼らは失敗している。

私のコードではインポートを避けることはできますが、インポートするコンポーネントにはその機能はありません。

私は以下を試しました。

設定での外部設定。

plugins: [ 
     new webpack.IgnorePlugin(/^(React|react|ReactDOM|react-dom)$/) 
    ] 

と検索のかなりを完了このmodule.noParse

const noParse = require('react-noparse').noParse; 
module.noParse: /^(React|react|ReactDOM|react-dom)$/ 

を使用してプラグイン無視WebPACKのを使用して

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

は、解決策を見つけていません。いずれの方向にも感謝します。 ありがとう

Answer 1

これはうまくいきました。たぶん、これは一般的な知識ですが、他の人に役立つかもしれません。昨日私にとって便利だったでしょうか。

私は

module.exportsは= window.Reactのように反応し、ReactDOMエクスポート 1行ダミーファイルを作成する方法についてhttps://github.com/webpack/webpack/issues/1275の記事を読みます。

を入力し、エイリアスセクションでこれらのファイルへの参照を追加します。

alias: { 
    "react": "./dummyReact.js", 
    "react-dom": "./dummyReactDOM.js" 
} 

これはうまくいきましたが、外見を追加すると正しくウェブパックがその同じパターンに従うようになりました。出力にWebPACKのこれらの文献は、ご使用の環境のグローバルであることを期待して、次のモジュールを起こし

見た目

externals: { 
    'react': 'React', 
    'react-dom': 'ReactDOM', 
    "mylibrary": "MyLibrary" 
} 

でこれを置く

。

/* 2 */ 
/***/ (function(module, exports) { 

module.exports = React; 

/***/ }), 
/* 3 */ 
/***/ (function(module, exports) { 

module.exports = ReactDOM; 

/***/ }), 
/* 4 */ 
/***/ (function(module, exports) { 

module.exports = MyLibrary; 

/***/ })