我正在用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
}
发布于 2018-07-25 15:51:35
https://stackoverflow.com/questions/51522877
复制相似问题