Блог

Главная - Вопросы по программированию - Использование webpack для использования требуемых модулей в браузере

Использование webpack для использования требуемых модулей в браузере

#javascript #node.js #express #webpack #browserify

#javascript #node.js #экспресс #webpack #browserify

Вопрос:

Последние 2 дня пытался использовать require (‘modules’) в браузере с webpack, когда я мог сделать то же самое в browserify за 5 минут…

Вот мой webpack.config.js

 var webpack = require('webpack');
var path = require('path');
var fs = require('fs');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs '   mod;
  });

module.exports = {
    entry: "./main.js",
    output: {
        filename: "bundle.js"
    }
}

Однако, что бы я ни делал, я получаю какую-то ошибку. В настоящее время я получаю: 

 bundle.js:390 Uncaught Error: Cannot find module "net"

и когда я запускаю webpack, он выдает эти ошибки:http://pastebin.com/RgFN3uYm

Я последовал https://webpack.github.io/docs/tutorials/getting-started / и http://www.pauleveritt.org/articles/pylyglot/webpack / тем не менее, я все еще получаю эти ошибки.

Я пытался запустить его с помощью этого: webpack ./main.js -o bundle.js Тем не менее, это все еще не работает.

Как это можно решить?

Комментарии:

1. Чего вы пытаетесь достичь, webpack.config.js читая node_modules каталог? Я никогда не видел, чтобы кто-нибудь делал это раньше, и вы, похоже, ни для чего не используете результаты.

2. Прямо сейчас это посторонний код. Я не уверен. Хорошо, что вы отметили это.

3. Как именно я должен это сделать тогда?

4. Попробуйте включить path: __dirname в свой output объект (точно так же, как они делают в разделе «Файл конфигурации» здесь ). Я бы также удалил другой код, чтобы вы могли исключить это как источник проблемы.

5. К сожалению, он по-прежнему выдает ту же ошибку, хотя: (

Ответ №1:

Вы должны добавить каталоги для разрешения, например

  resolve: {
        modulesDirectories: ['./app/', './node_modules']
 }

Обновить:
Добавить загрузчик json

 npm install --save-dev json-loader

module: {
    loaders: [
      { test: /.json$/, loader: 'json-loader' }
    ]
  }

также fs, net, tls являются библиотеками для node.js не для использования в браузере. Вы должны добавить:

 node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }

Ответ №2:

Какова ваша структура папок?

У вас должен быть:

 packages.json
node_modules/net/
webpack.config.js
src/main.js

Затем на main.js добавить

 var net = require('net');

На webpack.config.js:

 const path = require('path');

const PATHS = {
    src: path.join(__dirname, 'src'),
    dist: path.join(__dirname, 'dist')
};

module.exports = {
    entry: path.join(PATHS.src, 'main.js'),
    output: {
        path: PATHS.dist,
        filename: 'bundle.js'
    }
}

Запустите webpack , и это важно, на index.html укажите на файл пакета, а не на main.js !

Ответ №3:

Модули узла не могут быть запущены из браузера.

К сожалению, это так просто. Давайте сделаем шаг назад. С официального веб-сайта:

Node.js ® — это среда выполнения JavaScript, построенная на движке Chrome JavaScript версии 8.

Может показаться, что это деталь, но сама по себе она не предназначена для выполнения JavaScript в браузере. Однако, будучи средой выполнения JavaScript, она может интерпретировать и запускать код javascript с добавленной функциональностью, отличной от того, что мы можем делать в браузере, например, с require() функцией. Он встроен в Node, но не в V8.

Что также позволяет node, так это писать модули. Вы могли бы написать модуль node на c , скомпилировать его и импортировать в контексте Node. Это невероятная сила, потому что это позволяет javascript иметь доступ к функциональности более низкого уровня, что, в свою очередь, позволило писать серверы на javascript.

Функциональные возможности низкого уровня недоступны в браузере.

Давайте рассмотрим это:

 const fs = require('fs');

Что это вообще должно означать, если запускать в браузере? Какая файловая система? Я осмелюсь сказать, что ни в коем случае, никогда, я не должен хотеть, чтобы какой-либо случайный веб-сайт, к которому я обращаюсь, получал доступ к файловой системе компьютера, на котором он запущен. В случае сервера, в среде узла, доступ к файловой системе является необходимостью.

Узловые модули, такие как fs, tls или net, используют функциональность низкого уровня, которая не имеет эквивалента в браузере, будь то по логическим («какая файловая система?») или по соображениям безопасности («нет, ваш код javascript не должен быть способен создавать необработанные tcp-соединения») причинам.