angular - Hur man åsidosätter ionic-scripts för att inkludera react vid byggnation?

Jag försöker inkludera några React-komponenter i ett Ionic2-Angular4-projekt men utan framgång. För byggprocessen använder jag ionic-skript.

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

Jag har också uppdaterat compilerOptions i tsconfig.json med alternativet nedan:

{
  "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
  }
}

Och webpack.config.ts som nedan:

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

Jag har också lagt till följande bibliotek i 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",

Varje gång jag försöker bygga, slutförs byggandet korrekt men jag får felet :

Error: Cannot find module "./TestBar"

TestBar är en React-komponent som jag försöker importera till en Angular-komponent. Koden är nedan för

TestBar.tsx-fil:

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

Har någon någonsin försökt något liknande?

Svar #1

Slutligen lyckades jag åsidosätta webpack. Som jag såg i det här inlägget Hur man utökar standard webpack-konfiguration i Ionic v2 för att kunna åsidosätta webpack-konfigurationen bör du göra stegen nedan:

  • I rotmappen för ditt projekt, skapa en mapp som heter config och kopiera filen webpack.config.js dit (denna fil finns i ..\node_modules\@ionic\app-scripts\config)
  • Ändra den kopierade filen enligt behov
  • I filen package.json från ditt projekt, lägg till:
"config": {
   "ionic_bundler": "webpack",
   "ionic_webpack": "./config/webpack.config.js"
}

Relaterade artiklar