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

Question

我正在使用 React 和 Redux 开发一个项目，我的许多 Redux 操作/reducer 都是可重用的，因此它们位于当前项目之外的一个公共文件夹中。

我正在尝试包含 Redux 操作和缩减程序，但我收到以下 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”版本是：

我有两个目录（第一个包含我想要的减速器和操作）：

(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 找不到合适的 loader 并抛出错误。

例如，您可以尝试扩展正则表达式以包含 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'