Question

我正在使用ReactJS增强网站。我的文件夹结构如下所示：

 _npm
   node_modules
   package.json
   package-lock.json
   webpack.config.js
 _resources
   js
     react
       reactapp1.js
       reactapp2.js
       components
         FormDisplay.js

我想将自定义的reactjs包导入FormDisplay组件。当我输入：

import PlacesAutocomplete from 'react-places-autocomplete'

这不起作用。但是如果我输入：

import PlacesAutocomplete from "./../../../_npm/node_modules/react-places-autocomplete";

这有效。我了解为什么会这样。我想知道是否有一种方法可以输入：

import PlacesAutocomplete from 'react-places-autocomplete';

如何使它仅适用于那行代码，而不必找到node_modules文件夹的路径？

我的webpack配置：

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

const PATHS = {
    app: path.join(__dirname, "../_resources/react/"),
    build: path.join(__dirname, '../wordpress_site/wp-content/themes/custom_theme/assets/js/'),
  };

module.exports = {
    entry: {
        reactapp1: path.join(PATHS.app, "reactapp1.js"),
        reactapp2: path.join(PATHS.app, "reactapp2.js")
    },
    output: {
        filename: "[name].bundle.js",
        //path: path.join(__dirname,  "dist")
        path: PATHS.build
    },
    module:{
        rules: [
            {
                test: /\.js?$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["env", "react"],
                        plugins: ["transform-class-properties"]
                    }
                }
            }

        ]// rules array
    }, // module
}

Answer 1

您是否尝试过使用webpack的resolve-modules？

 resolve: {
   modules: ['_npm/node_modules']
 }

可能会工作

WebPack导入反应另一个文件夹中的自定义包

1 个答案: