Question

我正在使用React和Redux开发项目，并且我的许多Redux操作/缩减器都可以重复使用，因此它们位于当前项目之外的公共文件夹中。

我正在尝试包含Redux操作和reducers，但是我收到以下webpack错误：

ERROR in ./src/components/PreApp.js
Module not found: Error: Cannot resolve module '..../../../../../themes/fuelled-base/lib/fuelled-core/register/fuelled-redux-base/base-actions' in /Users/joneslloyd/Documents/MAMP/fuelledv2/wp-content/plugins/fuelled-lunch-menus/admin/js/scripts/src/components
 @ ./src/components/PreApp.js 15:19-124

我也尝试在webpack中包含所述文件，但是得到了这个错误：

ERROR in /Users/joneslloyd/Documents/MAMP/fuelledv2/wp-content/themes/fuelled-base/lib/fuelled-core/register/fuelled-redux-base/base-reducers.js
Module parse failed: /Users/joneslloyd/Documents/MAMP/fuelledv2/wp-content/themes/fuelled-base/lib/fuelled-core/register/fuelled-redux-base/base-reducers.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import { combineReducers } from 'redux'
| import {
|   REQUEST_FUELLED_WP_API_ENTITIES,

是否有正确的方法来包含这些文件？

当尝试通过webpack包含文件时，我的webpack.config.js文件看起来像这样：

'use strict';

let path = require('path');

module.exports = {
    entry: path.resolve(__dirname + '/src/components/Root.js',__dirname + '../../../../../../themes/fuelled-base/lib/fuelled-core/register/fuelled-redux-base/base-reducers.js'),
    output: {
        path: path.resolve(__dirname + '/../'),
        filename: 'fuelled-lunch-menus-admin.js',
        devtoolLineToLine: true
    },
    module: {
        loaders: [
            {
                test: /src\/.+.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel'
            }
        ]
    }
}

当尝试通过我想要使用它而不是webpack的JS文件包含文件时这样：

'use strict';

let path = require('path');

module.exports = {
    entry: path.resolve(__dirname + '/src/components/Root.js'),
    output: {
        path: path.resolve(__dirname + '/../'),
        filename: 'fuelled-lunch-menus-admin.js',
        devtoolLineToLine: true
    },
    module: {
        loaders: [
            {
                test: /src\/.+.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel'
            }
        ]
    }
}

如果我的要求不完全清楚，我的问题的“TL; DR”版本是：

我有两个目录（第一个包含我想要的reducer和actions）：

(1) /wp-content/themes/fuelled-base/lib/fuelled-core/register/fuelled-redux-base/base-reducers.js

(2) /wp-content/plugins/fuelled-lunch-menus/admin/js/scripts/src/components/configureStore.js

在（2）中我有这个导入：

import rootReducer from '../../../../../../../themes/fuelled-base/lib/fuelled-core/register/base-reducers'

它不起作用。而且我尝试通过Webpack导入文件，这也不起作用。

任何建议/指示都会很棒。

谢谢！

Answer 1

您的问题似乎是，您的babel加载程序的测试正则表达式包含src目录，而themes路径不包含该目录。因为babel test正则表达式不匹配，所以webpack找不到合适的加载器并抛出错误。

您可以尝试扩展正则表达式以包含fuelled-base目录（或者如果可能的话，首先忽略src\/部分）：

module.exports = {
    entry: path.resolve(__dirname + '/src/components/Root.js'),
    output: {
        path: path.resolve(__dirname + '/../'),
        filename: 'fuelled-lunch-menus-admin.js',
        devtoolLineToLine: true
    },
    module: {
        loaders: [
            {
                test: /(src|fuelled-base)\/.+.jsx?$/, // or simply: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel'
            }
        ]
    }
}

奖励：更好的路径

如果您想避免这种糟糕的相对路径，可以将resolve option in webpack配置为包含以下路径：

resolve: {
    extensions: ['.js', '.jsx'],
    root: [ // in case you are using webpack 2, this is called "modules" now
        path.resolve(yourProjectPath, 'node_modules'), // you probably want to keep this
        path.resolve(yourWordpressPath, 'wp-content') // here you use wp-content as a base path
    ]
}

然后你应该能够做到：

import rootReducer from 'themes/fuelled-base/lib/fuelled-core/register/base-reducers'

ES6和webpack：Redux：如何从远程目录导入文件

1 个答案: