빌드시 반응을 포함하기 위해 이온 스크립트를 덮어 쓰는 방법은 무엇입니까?

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

마지막으로 웹 팩을 재정의했습니다. 프로젝트의 루트 폴더에

• config 폴더를 생성하고이 파일 webpack.config.js 복사 : 난 당신이 아래의 단계를 수행해야 webpackconfig를 오버라이드 (override) 할 수 있도록하기 위해이 게시물 How to extend default webpack config in Ionic v2에서 본로서, (이 파일에 있습니다 .. \ node_modules \ @ionic \ 앱 스크립트 \ 프로젝트 추가에서 파일 package.json에서
• 을 필요에 따라
• 복사 된 파일을 수정 설정 :

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