如何从不同的 `/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';

你也可以稍微改进一下你的 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', ],
},

之后，您可以从 publicFolder、appFolder 导入任何东西，就像从 node_modules 一样。例如

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