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

Question

我正在使用 React 和 Redux 开发一个项目，我的很多 Redux actions/reducers 都是可重复使用的，所以它们位于当前项目之外的一个公共文件夹中。

我正在尝试包含 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.config.js 文件在尝试通过 webpack 包含文件时看起来像这样：

'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 和 action）：

(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：如何从远程目录导入文件

ES6 and webpack: Redux: How to import a file from a distant directory

import

ecmascript-6

reactjs

webpack

redux