在Reactjs中不使用依賴項的導出/導入

我正在開發reactJS。我在兩個兩個javaScript文件中分別創建了名爲App和Layout的兩個組件。我的應用程序應使用佈局。在Reactjs中不使用依賴項的導出/導入

//index.html 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<script src="react-0.14.7.js"></script> 
<script src="react-dom-0.14.7.js"></script> 
<script src="browser.min.js"></script> 
</head> 
<body> 
    <div id="root"></div> 
    <script type="text/babel" src="/js/components/App/App.js" ></script> 
</body> 
</html>

。

//App.js 

var Layout = require('/js/components/Layout/Layout.js');  
var App = React.createClass({ 
    render() { 
     return(
      <div> 
      <p>hello from App</p> 
      <Layout/> 
      </div> 
    ) 
    } 
}); 

ReactDOM.render(
     <App />, 
     document.getElementById('root') 
    );

。

//Layout.js 

Var Layout= React.createClass({ 
    render:function(){ 
     return(
      <div> 
       <p>hi from Layout</p> 
      </div> 
     ) 
    }, 

}); 
//even i tried 'export default Layout'

當我從（'/js/components/Layout/Layout.js'）使用導入佈局。它給出了一個錯誤意外令牌導入。

使用require（'/ js/components/Layout/Layout.js'）。它給出了錯誤需要不定義。

我嘗試過很多辦法把佈局到應用程序，但我發現的唯一的解決方案是使用Browserify，節點和NPM，的WebPack ...

但我希望它既不依賴軟件包也不罐子被執行。有什麼辦法可以完成這件事嗎？

在此先感謝。

來源

2017-08-18 Dinesh

在require中使用'.'來試試var Layout = require（'./ js/components/Layout/Layout.js'）; ' – T4rk1n

'require'是一個node.js函數。你的瀏覽器沒有'require'功能。 'import'是一個javascript（ES6）語句。我不認爲任何瀏覽器實際上都支持它。你可以使用像[rollup]（https://rollupjs.org）這樣的工具來處理'import'語句，並生成一個單獨的文件 –

@ T4rk1n我甚至試過！但沒有結果。 – Dinesh

簡短的回答是否定的。 Browserify和Webpack都是模塊捆綁器，並且會爲您進行文件捆綁。我建議你首先了解兩種工具的用途。

的第一件事Browserify網站告訴你是它的唯一目的：

Browserify讓您可以要求（「模塊」）中捆綁了你的全部依賴瀏覽器。

而且同樣的故事的WebPack：

的WebPack是現代JavaScript應用程序模塊捆綁。當webpack處理您的應用程序時，它會遞歸地構建一個依賴圖，其中包含您的應用程序需要的每個模塊，然後將所有這些模塊打包到少量的捆綁包中 - 通常只有一個 - 將由瀏覽器加載。

這些只是他們兩個的簡短描述。

來源

2017-08-18 16:23:36

感謝@SantiagoBenitez的更新。我完全理解了這個概念。但我只是想讓它與外部資源無關。所以，我只是想替代品！ – Dinesh

在這種情況下，您需要做的是使用IIFE表達式自己完成命名空間，然後強制執行文件的順序，以便在需要時可以使用這些文件（即，在App.js之前應該引用Layout.js ）。是否有意義？ –

是的，現在有道理。 – Dinesh

在Reactjs中不使用依賴項的導出/導入

回答

相關問題