如何將React與非平凡的AngularJS應用程序和現有的grunt配置集成？

我目前正在創建一個新的React組件，該組件需要與現有的Angular 1.x應用程序集成，該應用程序本身已經有了以Grunt爲中心的自己的構建過程。在某些時候，應用程序可能完全遷移到React，但現在只有這一個組件將在React中完成。如何將React與非平凡的AngularJS應用程序和現有的grunt配置集成？

Angular應用程序使用grunt在其周圍構建了一個廣泛的構建過程，因此任何構建新組件都必須能夠通過grunt。

到目前爲止，另一個開發人員已經開始使用React starter kit開發React組件，其中包括React，Webpack，Babel，它可以啓動的開發服務器以及各種其他花裏胡哨的功能。

這是我研究的初始刺了我，以及目前的障礙：

看起來ngReact將是一個集成組件做出反應到應用程序的好工具。
當前的React設置可以啓動一個帶有React應用程序的嵌入式構建的開發服務器（沒有真正可用的構建文件），或者創建一個縮小並準備發佈的「生產」構建。這不起作用，因爲我需要它來創建當前應用程序和ngReact可以使用的東西。
React應用程序正在使用Webpack捆綁在一起。有一個可以運行webpack配置的grunt工具。

如何將所有這些移動塊放在一起，將React組件捆綁到現有的Angular應用程序中，同時儘可能多地保留現有配置？

來源

2017-05-02 Aaron Brown

下面是需要有解決這個問題的步驟（分量/文件名更改爲保護無辜者）：

獲取的WebPack輸出的生成，我可以用ngReact以後使用。在webpack.config.js中，我必須將output:{ path: 'build' }更改爲build_react，這樣它纔不會被Angular構建過程覆蓋。此外，在module.loaders，我不得不添加如下所示的預設線路，爲了得到它的輸出非ES6，有效的JavaScript：
```
//Process JS with Babel. 
{ 
    test: /\.(js|jsx)$/, 
    include: paths.appSrc, 
    loader: 'babel-loader', 
    query: { 
    presets: ['env', 'react'], 
    } 
} 
```

使用NPM安裝咕嚕-的WebPack，並使用鏈接進行配置webpack配置文件。使用所有其他類似的配置，該文件被拉入到grunt initConfig。

//webpackConfig.js 
module.exports.name = 'webpack'; 
const webpackConfig = require('../webpack.config.dev.js'); 

/** 
* Pull in our react webpack build 
*/ 
module.exports.getConfiguration = function(grunt) { 
    return { 
     options: { 
      stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development' 
     }, 
     prod: webpackConfig, 
     dev: webpackConfig 
    }; 
};

包括react.js，react-dom.js，ng-react.min.js，並內置在＃1在我們的index.html文件捆綁。（這些將在以後被連接成生產版本的一個文件。）至關重要，該包必須包含之後的所有Angular文件，包括所有應用程序.js文件，以便React組件可以訪問angular對象爲下一步。
此行添加到陣營組件，使ngReact將工作：angular.module('angularModule').value('MyComponent', MyComponent);
添加以下的角範本中做出反應組件將包括：<react-component name="MyComponent"></react-component>

畢竟這些步驟，它終於工作了！如果有人在將來遇到這個問題，希望這可以幫助有人將這些步驟放在一起。

來源

2017-05-02 04:08:10

，謝謝你的問題，我正在尋求這個答案 – sg28

如何將React與非平凡的AngularJS應用程序和現有的grunt配置集成？

回答

相關問題