如何覆蓋ionic-scripts以便在構建中包含反應？

我想在Ionic2-Angular4項目中加入一些反應組件，但沒有成功。對於建設過程中，我使用的離子腳本如何覆蓋ionic-scripts以便在構建中包含反應？

"build": "ionic-app-scripts build", 
"serve": "ionic-app-scripts serve",

我也更新上tsconfig.json與下面的選項compilerOptions：

{ 
    "compilerOptions": { 
    "jsx": "react", 
    "declaration": false, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": [ 
     "dom", 
     "es2015" 
    ], 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "target": "es5" 
    }, 
    "include": [ 
    "src/**/*.ts", 
    "src/**/*.tsx" 
    ], 
    "exclude": [ 
    "node_modules" 
    ], 
    "compileOnSave": false, 
    "atom": { 
    "rewriteTsconfig": false 
    } 
}

而且webpack.config.ts如下：

var path = require('path'); 
var webpack = require('webpack'); 
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY); 

module.exports = { 
    entry: process.env.IONIC_APP_ENTRY_POINT, 
    output: { 
     path: '{{BUILD}}', 
     publicPath: 'build/', 
     filename: process.env.IONIC_OUTPUT_JS_FILE_NAME, 
     devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(), 
    }, 
    devtool: process.env.IONIC_SOURCE_MAP_TYPE, 

    resolve: { 
     extensions: ['.ts', '.js', '.tsx', '.json'], 
     modules: [path.resolve('node_modules')] 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.json$/, 
       loader: 'json-loader' 
      }, 
      { 
       test: /\.tsx?$/, 
       loader: process.env.IONIC_WEBPACK_TRANSPILE_LOADER 
      }, 
      { 
       test: /\.js$/, 
       loader: process.env.IONIC_WEBPACK_TRANSPILE_LOADER 
      } 
     ] 
    }, 

    plugins: [ 
     ionicWebpackFactory.getIonicEnvironmentPlugin(), 
     new webpack.EnvironmentPlugin(['IONIC_ENV']) 
    ], 
    node: { 
     fs: 'empty', 
     net: 'empty', 
     tls: 'empty' 
    } 
};

而且我已經添加的package.json以下庫：

"react": "^15.6.1", 
    "react-dev-utils": "^4.0.1", 
    "react-dom": "^15.6.1", 
    "react-redux": "^5.0.6", 
    "redux": "^3.7.2",

每次我試圖建立，構建正確完成，但我得到的錯誤：

Error: Cannot find module "./TestBar"

的TestBar是我試圖將其導入的角度成分上ReactComponent。該代碼是低於

TestBar.tsx文件：

import * as React from 'react'; 
import * as ReactDOM from 'react-dom'; 
import { Injector } from '@angular/core'; 
import { ValueStore} from './redux/list.store'; 
import {Model} from './model'; 

interface ReactChildComponentViewProps { 
    store: ValueStore; 
    injector: Injector; 
} 

let TestBar = React.createClass<ReactChildComponentViewProps, any> ({ 

    getInitialState: function() { 
     let model: Model = this.props.injector.get(Model); 
     console.log('Using Angular 2 injector in React body, model.uuid: ' + model); 
     this.props.store.store.subscribe(() => { 
      this.setState({ 
       'elements': this.props.store.store.getState() 
      }); 
     }); 
     return { 
      'title': this.props.title, 
      'elements': this.props.store.store.getState() 
     }; 
    }, 
    render() { 
     return (
       <div>aaaa</div> 
     ); 
    } 
}); 


export class ReactChildComponentView { 

    static initialize(store, injector, containerId) { 
     ReactDOM.render(<TestBar store={store} injector={injector}/>, document.getElementById(containerId)); 
    } 
}

曾經有人試圖類似的東西？

來源

2017-09-24 geo

是的，我知道，但我想看看是否有可能。我已經看到這個http://blog.robertjesionek.com/angular-2-and-react-components-within-a-single-app/，我相信它會非常簡單 – geo

@lilezek，react-native需要一個完整的重寫JSX/TSX代碼。它有一套完全不同的組件。什麼地理想要做是合理的。 –

最後，我設法覆蓋了webpack。正如我在這個崗位How to extend default webpack config in Ionic v2看到，爲了能夠覆蓋webpackconfig你應該做以下步驟：

在你的項目的根文件夾中創建config文件夾和文件複製webpack.config.js有（該文件位於.. \ node_modules \ @ionic \應用程序的腳本\ config目錄
要求
在該文件中的package.json從項目中添加修改複製的文件：

"config": { 
    "ionic_bundler": "webpack", 
    "ionic_webpack": "./config/webpack.config.js" 
}

來源

2017-09-25 10:16:06 geo

如何覆蓋ionic-scripts以便在構建中包含反應？

回答

相關問題