使用共享的Redux Reducer对Web和React本机进行反应

时间:2017-10-30 10:03:53

标签: reactjs react-native webpack redux

我尝试创建反应原生和反应web项目,这是共享redux动作和reducer。我创建了webpack,但在连接我的reducer for web webpack时抛出错误,如:

ERROR in ./~/native-base/dist/src/basic/Tabs/DefaultTabBar.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./Button in C:\Works\xxx\                                      node_modules\native-base\dist\src\basic\Tabs
resolve file
  C:\Works\xxx\node_modules\native-base\dist\src\basic\Tabs\Button.js doesn't exist
  C:\Works\xxx\node_modules\native-base\dist\src\basic\Tabs\Button.jsx doesn't exist
  C:\Works\xxx\node_modules\native-base\dist\src\basic\Tabs\Button doesn't exist
  C:\Works\xxx\node_modules\native-base\dist\src\basic\Tabs\Button.webpack.js doesn't e                                      xist
  C:\Works\xxx\node_modules\native-base\dist\src\basic\Tabs\Button.web.js doesn't exist
  C:\Works\xxx\node_modules\native-base\dist\src\basic\Tabs\Button.json doesn't exist
resolve directory
  C:\Works\PrimeApps\node_modules\native-base\dist\src\basic\Tabs\Button doesn't exist (direc                                      tory default file)
  C:\Works\xxx\node_modules\native-base\dist\src\basic\Tabs\Button\package.json doesn't                                       exist (directory description file)
[C:\Works\xxx\node_modules\native-base\dist\src\basic\Tabs\Button.js]
[C:\Works\xxx\node_modules\native-base\dist\src\basic\Tabs\Button.jsx]
[C:\Works\xxx\node_modules\native-base\dist\src\basic\Tabs\Button]
[C:\Works\xxx\node_modules\native-base\dist\src\basic\Tabs\Button.webpack.js]
[C:\Works\xxx\node_modules\native-base\dist\src\basic\Tabs\Button.web.js]
[C:\Works\xxx\node_modules\native-base\dist\src\basic\Tabs\Button.json]
 @ ./~/native-base/dist/src/basic/Tabs/DefaultTabBar.js 13:11-30

这只是一个错误我得到了很多这样的错误...

webpack尝试构建使用反应本机代码的库..我不明白为什么reducer导致这个问题..当我删除reducer编译成功..我使用共享package.json这可能是问题?我的webpack配置文件是:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: [
    path.join(__dirname, '../../web/index'),
    path.join(__dirname, '/'),
  ],
  resolve: {
    extensions: ['', '.js', '.jsx', '.webpack.js', '.web.js', '.json'],
  },
  output: {
    path: path.join(__dirname, '../public'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  module: {
    loaders: [
        {
            test: /\.json$/,
            loader: 'json-loader'
        },
        {test: /\.html/, loader: "html-loader"},
        {test: /\.css$/, loader: "style-loader!css-loader"},
        {
            test: /\.scss$/,
            loader: 'style!css!sass',
        },
        {
            test: /\.(js|jsx|es6)$/, 
            loader: 'babel',
            query: {
                presets: [ 'es2015', 'stage-0','react' ],
                plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
            }
        },
        {
            test: /\.(jpe?g|png|gif)$/i,
            loaders: [
              'file?hash=sha512&digest=hex&name=[hash].[ext]',
              'image-webpack'
            ],
            options: {
                query: {
                    mozjpeg: {
                      progressive: true,
                    },
                    gifsicle: {
                      interlaced: false,
                    },
                    optipng: {
                      optimizationLevel: 4,
                    },
                    pngquant: {
                      quality: '75-90',
                      speed: 3,
                    },
                }   
            }
        },
        {
            test: /\.(woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'url-loader?limit=100000'
        }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        // Useful to reduce the size of client-side libraries, e.g. react
        NODE_ENV: JSON.stringify('production'),
        PLATFORM_ENV: JSON.stringify('web'),
      },
    }),
    // optimizations
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
    }),
  ],
};

这是我的reducer文件

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import RouteReducer from './RouteReducer';
import LoginReducer from './LoginReducer';
import AppReducer from './AppReducer';
import CalendarReducer from './CalendarReducer';
import RecordReducer from './RecordListReducer';
import RecordDetailReducer from './RecordDetailReducer';
import TasksReducer from './TasksReducer';
import SettingsRecuder from './SettingsReducer';
import FilterReducer from './FilterReducer';
import ActivityFeedsReducer from './ActivityFeedsReducer';

export default combineReducers({
    app: AppReducer,
    settings: SettingsRecuder,
    nav: RouteReducer,
    auth: LoginReducer,
    filters: FilterReducer,
    tasks: TasksReducer,
    calendar: CalendarReducer,
    recordsList: RecordReducer,
    recordDetail: RecordDetailReducer,
    feeds: ActivityFeedsReducer,
    form: formReducer
});

0 个答案:

没有答案