Как импортировать модуль из другой папки `/ 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/

Я создал 2 отдельных npms, один для корневой папки (/www) для разработки, а другой для ресурсов (изображений, значков и узловых модулей) в public/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
    }

};

Как загрузить модули из другой папки?

Answer 1

Вы должны импортировать 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');

и

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

после этого вы можете импортировать любую вещь из publicFolder, appFolder как из node_modules.например,

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