使用Webpack外部並仍然允許ES6樣式導入？

我正在創建Chrome擴展程序，並使用React和Webpack。使用Webpack外部並仍然允許ES6樣式導入？

因爲這是一個Chrome擴展，我可以使用manifest.json將React和ReactDOM加載到瀏覽器中，並在我自己的代碼的任何一行執行之前。我的理解是：

的react.js LIB通過manifest.json加載顯示爲全局變量，通過window.React訪問
的WebPack的外部可以進行配置，以便反應，ReactDOM不會被捆綁

這裏是我的文件：

webpack.config.js

module.exports = { 

    entry: './index.js', 
    output: { 
    filename: 'skinny-bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: "babel-loader" 
     } 
    ] 
    }, 

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

manifest.json的

{ 
    "manifest_version": 2, 
    "name": "Test Application", 
    "version": "3.2", 
    "description": "testing", 
    "short_name": "some test", 

    "author": "blah blah", 

    "content_scripts": [ 
    { 
     "matches": ["https://www.google.com/*"], 
     "js": [ 
     "react.js", 
     "react-dom.js", 

     "skinny-bundle.js" 
     ], 
     "run_at": "document_idle" 
    } 
    ] 
}

index.js

import HelloGreeting from './HelloGreeting'  

ReactDOM.render(
    <HelloGreeting />, 
    document.getElementById('cst') 
)

HelloGreeting.js

// import React from 'react' <----- here is my problem!!! 

// functional component test 
const Hello = props => { 
    return (
    <div>hello world</div> 
) 
} 

// class component test 
class HelloGreeting extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 
    return (
     <ul> 
     <li><Hello /></li> 
     <li>hello universe</li> 
     </ul> 
    ) 
    } 
} 

export default HelloGreeting

就出在這裏我的問題。我有一個名爲HelloGreeting的簡單React組件，如果我保持import React from 'react'行不起作用。如果我註釋掉導入，它實際上起作用，因爲我的猜測是webpack只是忽略它，因爲React已經在webpack外部被定義了。如果我將import語句放入，我得到一個"Uncaught TypeError: Cannot read property 'Component' if undefined"錯誤，可能是因爲Webpack試圖以某種方式捆綁和混淆window.React。我做了這個猜測，因爲有或沒有導入的webpack發出的內容。

如果我註釋掉進口的WebPack發出一個較小的包：

Hash: 26f1526e2554c828c050 
Version: webpack 3.5.5 
Time: 80ms 
      Asset  Size Chunks    Chunk Names 
skinny-bundle.js 5.75 kB  0 [emitted] main 
    [1] ./HelloGreeting.js 2.5 kB {0} [built] 
    + 1 hidden module

如果我把我的進口，我的WebPack發出更大的包：

Hash: 1fc9353f1fe6dd935744 
Version: webpack 3.5.5 
Time: 77ms 
      Asset  Size Chunks    Chunk Names 
skinny-bundle.js 6.05 kB  0 [emitted] main 
    [1] ./HelloGreeting.js 2.71 kB {0} [built] 
    + 2 hidden modules

我的問題是，什麼我可以做的配置webpack，使我仍然有我的ES6風格的進口，仍然有webpack不捆綁react.js？

我真的想保留導入語句，因爲這些組件將在未來的項目中使用，我希望儘可能保持模塊化和便攜性。

來源

2017-09-05 Kevin

我還沒有使用模塊，所以我的評論可能是無關緊要的，但如果你期望'import'被瀏覽器處理，它[尚未在擴展中支持]（https://crbug.com/738739 ），而且你在內容腳本中使用相對路徑，而不是在iframe中，對吧？如果是這樣，那麼當前的URL是網頁的URL。 – wOxxOm

我試着改變我的代碼從''''進口從'react'''反應'''const React = require（'react'）'''但我仍然得到相同的錯誤。 – Kevin

事實證明我過於複雜的webpack externals。

下更改：

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

到：

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

...解決我的問題。現在webpack會忽略所有的React代碼，並保持我的包很小。

https://github.com/webpack/webpack/issues/1275幫我一把。

來源

2017-09-18 01:01:53 Kevin

使用Webpack外部並仍然允許ES6樣式導入？

回答

相關問題