在CakePHP項目中設置React

如何使用webpack在CakePHP webroot中設置React？在CakePHP項目中設置React

我有一個現有CakePHP項目（模型，視圖，控制器）。我想在其webroot（Project/Miniproject/index.html）中設置迷你React項目。 index.html將對控制器中定義的api進行ajax調用。

- Project 
| - app 
| | - Controller 
| | - View 
| | - Model 
| | - webroot 
| | | - Miniproject 
| | | | - index.html [Mini react project]

我試過安裝React Transform Boilerplate。但它使用web dev服務器（並在localhost：3000上渲染文件）。但是我想要運行我的CakePHP項目的nginx服務器上的文件。

當我訪問url（Project/Miniproject/index.html）時，它找不到dist/bundle.js，因爲它在內存中。那麼如何使用webpack在CakePHP webroot中設置React？

來源

2016-04-15 john doe

https://github.com/gaearon/react-transform-boilerplate/blob/master/package.json#L8 'npm run build' – azium

@azium但是每次小改動之後我都需要運行這個命令。不會影響我的開發嗎？ –

webpack有一個手錶標誌https://webpack.github.io/docs/tutorials/getting-started/#watch-mode但我不認爲你可以混合dev服務器+熱重新加載和服務於nginx在相同時間。 – azium

您仍然可以讓Webpack通過BrowserSync運行開發服務器，您將使用代理選項來重新加載您的apache虛擬主機。（不必使用webpack-dev-server）

例如在你的webpack.config.js中

plugins: [ 

     // reloads browser when the watched files change 
     new BrowserSyncPlugin({ 
      // use existing Apache virtual host 
      proxy: 'http://localhost:80/', 
      tunnel: false, 
      // watch the built files and the index file 
      files: ['public/assets/*', './index.php', './api/*.php'] 
     }),

希望有道理。挖雖然從回購我的代碼鏈接和玩一點點。一旦你瞭解了@brawlins如何建立他的項目。你應該能夠馴服它或從頭開始你的webpack配置。

只要記住沒有一個正確的答案，你只需要嘗試一下你可以理解並且適合你的方法。一旦你到達一堵磚牆，你就出去探索。但我覺得你已經知道:)

祝你好運！

p.s.我同意@azium，最好儘可能保持前端和後端分開。

來源

2017-03-15 01:13:44 Konda

在CakePHP項目中設置React

回答

相關問題