angular - 如何覆盖 ionic 脚本以包含对构建的 react ？

Question

我试图在 Ionic2-Angular4 项目中包含一些 react 组件，但没有成功。对于构建过程，我使用的是 ionic 脚本

"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，我正试图将其导入 Angular 组件。代码如下

TestBar.tsx file:

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。正如，我在这篇文章中看到的 How to extend default webpack config in Ionic v2为了能够覆盖 webpackconfig 你应该执行以下步骤:

• 在项目的根文件夹中创建配置文件夹并将文件 webpack.config.js 复制到那里(此文件位于 ..\node_modules\@ionic\app-scripts\config
• 根据需要修改复制的文件
• 在项目的 package.json 文件中添加:

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