Npm 如何从不同的`/node\u modules/`文件夹导入模块

这是我的文件结构：

├── public/
│   ├── assets
│   │   ├── node_modules
│   │   │   ├── jquery
│   │   │   ├── etc... 
│   │   ├── images
│   │   ├──  icons
│   │   ├──  package.json
│   ├── es
│   │   ├── index.js
│   ├── js
│   │   ├── bundle.js
│   ├── scss
│   ├── css
│   ├── index.php
├── app/
│   ├── contollers
│   ├── models
│   ├── views
│   ├── helpers
├── node_modules/
│   ├── webpack/
│   │   ├── ... 
│   │   │   ├── ...
├── package.json
└── webpack.conf.js/

我创建了两个独立的NPM，一个用于根文件夹（

/www

）进行开发，另一个用于

公共/assets/

下的资产（图像、图标和节点模块）

我想将jquery库（例如）模块加载到我的

index.js

文件中

尝试：

import '../scss/style.scss';

import {$,jQuery} from '../assets/node_models/jquery';

返回

在./public/es/index.js模块中找不到错误：错误：无法解析 “../assets/node_models/jquery”位于“/www/public/es”@ /public/es/index.js 5:14-53

这是我的webpack.conf.js文件：

const path              = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UrlLoader         = require('url-loader');

module.exports = {

    entry: { 
                main: './public/es/index.js' 
    },
    output: {
                path:       path.resolve(__dirname, 'public/js/'),
                filename:   'bundle.js'
    },
    module: {
                rules: [
                            {
                                test:       /\.js$/,
                                exclude:    /node_modules/,
                                use: {
                                        loader: "babel-loader"
                                }
                            }, 
                            {
                                test: /\.s?css$/,
                                use: ExtractTextPlugin.extract({
                                    fallback: 'style-loader',
                                        use: ['css-loader', 'sass-loader']
                                })
                            }, 
                            {
                                test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
                                use: [{
                                    loader: 'url-loader',
                                    options: {
                                      limit: 100000
                                    }
                                }]
                            }
                ]
    },
    plugins: [
                new ExtractTextPlugin({
                    filename: '../css/main-style.css' 
                }), 
                new HtmlWebpackPlugin({
                    inject: false,
                    hash: true,
                    template: './public/index.php',
                    filename: 'index.php'
                })
    ],
    devServer: {
                    port:           3000,
                    contentBase:    __dirname + '/public/js', 
                    inline:         true
    }

};

---

如何从其他文件夹加载模块？

您必须像这样导入jquery：

import$from'assets/node_modules/jquery'

此外，您还可以稍微改进您的网页：

const path              = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UrlLoader         = require('url-loader');


publicFolder = path.resolve(__dirname, 'public');
appFolder = path.resolve(__dirname, 'app');

module.exports = {

    resolve: {
        modules: [ publicFolder, appFolder ],
        extensions: [ '.js', ],
    },

    entry: { 
                main: './public/es/index.js' 
    },
    output: {
                path:       path.resolve(__dirname, 'public/js/'),
                filename:   'bundle.js'
    },
    module: {
                rules: [
                            {
                                test:       /\.js$/,
                                exclude:    /node_modules/,
                                use: {
                                        loader: "babel-loader"
                                }
                            }, 
                            {
                                test: /\.s?css$/,
                                use: ExtractTextPlugin.extract({
                                    fallback: 'style-loader',
                                        use: ['css-loader', 'sass-loader']
                                })
                            }, 
                            {
                                test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
                                use: [{
                                    loader: 'url-loader',
                                    options: {
                                      limit: 100000
                                    }
                                }]
                            }
                ]
    },
    plugins: [
                new ExtractTextPlugin({
                    filename: '../css/main-style.css' 
                }), 
                new HtmlWebpackPlugin({
                    inject: false,
                    hash: true,
                    template: './public/index.php',
                    filename: 'index.php'
                })
    ],
    devServer: {
                    port:           3000,
                    contentBase:    __dirname + '/public/js', 
                    inline:         true
    }

};

我补充说

publicFolder = path.resolve(__dirname, 'public');
appFolder = path.resolve(__dirname, 'app');

及

之后，您可以从
publicFolder
，
appFolder
导入任何内容，就像从node\u模块导入一样。e、 g

import {$,jQuery} from 'assets/node_models/jquery';

我添加了两个新变量。添加了对您提到的设置的解析，并更改了我的导入状态：`ERROR in./public/es/index.js Module not found:ERROR:cannot resolve'assets/node_models/jquery'in'/www/public/es'@./public/es/index.js 5:14-50webpack配置正常。问题是
jquery
不为您提供
$
jquery
，所以您无法导入它们。安装loadash并尝试从“资产/节点\模块/lodash”导入

你会看到它按预期工作。我试着在

/www

下安装jquery只是为了运动，使用

$

和

jquery

它确实工作了。。。但是你试过用exmaple:ERROR in./public/es/index.js模块未找到：ERROR:Can't resolve'assets/node_modules/lodash'in'/www/public/es'@./public/es/index.js 5:14-51I console.log记录路径，这些值正确吗

/www/public

/www/app非常感谢Spasiba:D

import {$,jQuery} from 'assets/node_models/jquery';