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

Question

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

1

Я только начал изучать все причудливые вещи, которые Javascript должен предлагать главным образом Webkit. У меня есть приложение с приличным размером, которое использует раскрывающийся шаблон модуля. Эти модули выполняют вызовы на публичные функции других модулей для расчета и возврата результатов.

Использование этого шаблона работало отлично, пока я не начал рассматривать, что десятки сценариев включены в мои html-страницы. Итак, вот мы...

Для целей этого вопроса я сделал гораздо более простое приложение, чтобы продемонстрировать, что для меня не так.

У меня есть два модуля javascript, содержащиеся в их собственных файлах:

// one.js 
require("babel-loader?two!./two.js"); 
var one = (function(){
  two.sayHello(); 
})() 

// two.js
var two = (function(){
  var sayHello = function(){
    console.log('Hello World'); 
  }
  return {
    sayHello: sayHello
  }
})()

То, что я пытаюсь сделать, это использовать функцию sayHello из two.js внутри one.js

Итак, во-первых, я установил Webpack и Webpack exports-loader и создал следующий файл конфигурации:

module.exports = {
  entry: './index.js', 
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx$/,

        loader: "babel-loader",
        query: {
          presets: ['es2015'] 
        }
      }
    ]
  }
}

index.js - это мой файл ввода и просто включает следующую строку:

require('./one.js');

Теперь, пытаясь запустить этот код, я получаю следующую ошибку в консоли:

Uncaught ReferenceError: два не определены

С немного больше копания, я обнаружил, что мой скомпилированный файл bundle.js бросает следующую ошибку при попытке импортировать two.js:

("Ошибка синтаксического анализа модуля:\testing_env\webpack\two.js" импорт "и" экспорт "могут отображаться только на верхнем уровне (2: 2)\n Для обработки этого типа файла может потребоваться соответствующий загрузчик.

Очевидно, я делаю что-то неправильно, я просто не уверен, что. Я пробовал как exports-loader и babel-loader но без радости.

Какой загрузчик я должен использовать для анализа зависимостей модулей?

Любая помощь будет принята с благодарностью.

Sam 12 сен. 2017, в 12:43

Источник

Теги:

javascript

node.js

webpack

1 ответ

Ещё вопросы

Andrei CACIO · Accepted Answer · 2017-09-12T08-41-00.000Z

Из коробки webpack имеет поддержку CommonJS (которая является той же самой модульной системой, которую реализует Nodejs). Это означает, что вам нужно использовать синтаксис require/export для использования модулей.

Чтобы экспортировать что-то в модуль, вы просто выполните:

// a.js
function a() { console.log("I'm a module '); }

module.exports = a;

и в вашем другом модуле вы выполните:

// b.js
const a = require('./a.js');

a(); // I'm a module

require() просто возвращает объект exports. Независимо от того, что вы наделите, вы сможете получить в другом модуле.

Именно поэтому webpack является модульным модулем, он оснащен встроенной модульной системой. Образец модуля revelaing более практичен, если вы загружаете JS файлы непосредственно в браузер без модуля-модуля, и хотите инкапсулировать свои данные (в "модули").

Модуль модуля Revelaing полезен, когда у вас нет системы модулей, и вы просто загружаете свои JS файлы в браузер. До тех пор, пока ES-модули не были введены в браузере, JavaScript не имел собственной собственной модульной системы. Вот почему люди придумали шаблон модуля, чтобы иметь возможность инкапсулировать логику в браузере. Но теперь из-за таких инструментов, как webpack, и теперь у нас есть система ES Modules, у нас может быть более лучший способ инкапсулировать нашу логику.

Имеет ли это смысл?

Что если у меня есть несколько функций, которые я хочу экспортировать из? Можете ли вы показать пример этого, пожалуйста
Как я уже говорил в своем посте, все, что вы положите в module.exports , это то, что вы получите, когда вам require() в другом модуле. Чтобы экспортировать несколько функций, вы просто делаете module.exports.fn1 = ...; module.exports.fn2 = ... Тогда вам потребуется () объект со всеми функциями, которые вы экспортировали. const fn1 = require('./a').fn1;