如何从不同的 `/node_modules/` 文件夹导入模块？

Question

这是我的文件结构:

├── 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) 用于开发，另一个用于资源（图片、图标和node_modules）在public/assets/下。

我想将jQuery库（例如）模块加载到我的index.js文件中。

尝试过：

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

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

返回结果：

在webpack.conf.js文件中，我遇到了以下错误：

错误信息: 在路径“/www/public/es”中找不到“../assets/node_models/jquery”文件。

错误位置: ./public/es/index.js 的第5行和第14-53字符

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
    }

};

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

- Imnotapotato

Answer 1

您需要像这样导入jquery:

import $ from 'assets/node_modules/jquery';

另外，您可以稍微改进您的webpack：

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');

并且

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

之后，您可以像从node_modules一样从publicFolder、appFolder导入任何内容。例如：

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

- Arseniy-II

---

我添加了两个新变量。根据您提供的设置，添加了resolve并更改了我的导入语句： `ERROR in ./public/es/index.js Module not found: Error: Can't resolve 'assets/node_models/jquery' in '/www/public/es' @ ./public/es/index.js 5:14-50 - Imnotapotato

webpack的配置没问题。问题在于 jquery 没有为您提供 $ jquery，因此您无法导入它们。安装lodash并尝试 import _ from 'assets/node_modules/lodash';，您会看到它按预期工作。 - Arseniy-II

我使用console.log输出了路径，这些是正确的数值吗？/www/public /www/app - Imnotapotato

非常感谢您：D - Imnotapotato

这种情况时有发生。通常我会通过逐步从工作示例转移到自己的项目来解决这些问题。 - Arseniy-II