代码之家 › 专栏 › 技术社区 › Imnotapotato

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

es6-modules node-modules ecmascript-6 webpack npm

Imnotapotato · 技术社区 · 6 年前

âââ 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 )用于开发,另一个用于下的资源(图像、图标和节点模块) public/assets/ .

我想将jquery库(例如)模块加载到我的 index.js 文件。

尝试:

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

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

在./public/es中出错/索引.js找不到模块:错误:无法解析 /公共/es/索引.js5:14-53

这是我的网页包.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
    }

};

1 回复 | 直到 6 年前

Arseniy-II 6 年前

必须像这样导入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 从节点u模块。例如

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