ビルドに反応を含めるためにイオンスクリプトをオーバーライドする方法は？

Question

私はIonic2-Angular4プロジェクトにいくつかの反応コンポーネントを含めることを試みていますが、成功することはありません。

{ 
    "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以下のとおり：

構築プロセスのために私は、イオンスクリプト

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

私は、以下のオプションを使用してcompilerOptions tsconfig.jsonにも更新されているを使用しています

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)); 
    } 
} 

が今まで誰かが似た何かをしようとしたことがありますか？

Answer 1

最後に、私はwebpackを無効にすることができました。私はあなたが以下の手順を行う必要がありwebpackconfigを上書きすることができるようにするために、この記事How to extend default webpack config in Ionic v2で見た、よう：

• プロジェクトのルートフォルダにconfigフォルダを作成し、そこにファイルwebpack.config.jsをコピーします（このファイルは.. \ node_modules \ @ionic \アプリ-scriptsにあり、プロジェクトからファイルpackage.jsonで
• を必要に応じて\ CONFIG
• は、コピーしたファイルを変更、追加：

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