如何覆盖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以便在构建中包含反应？

回答

相关问题