Ошибка на консоли при использовании внешней библиотеки JavaScript на Rails. Я использую вебпак

Я использовал пряжу, чтобы добавить библиотеку npm под названием Swing в свой проект на Rails. https://github.com/gajus/swing

Проблема в том, что, несмотря на то, что он успешно компилируется с новой библиотекой, я получаю сообщение об ошибке на консоли и не могу использовать функции библиотеки.

Я использую веб-пакет версии 3.11.0 и Rails 5.1.5.

Код выглядит следующим образом:

Новый проект рельсов с шаблоном (включает драгоценные камни: https://github.com/lewagon/rails-templates/blob/master/minimal.rb и гем Devise для аутентификации):

rails new <app name> \
  --webpack \
  --database postgresql
  -m https://raw.githubusercontent.com/lewagon/rails-templates/master/devise.rb

Сгенерированная модель для поста

rails g model Post title:string photo:string content:text

Сгенерированный контроллер для Post

rails g controller posts 

controllers/posts_controller.rb 

def index
  //generates posts to display 
end

Создание представления индекса для сообщений.

/index.html.erb
//iterate over posts and build a card for each 

<div class="card"> populate card with post  </div>

Добавлен пакет Swing npm с Yarn (зависимость появляется в package.json после установки)

yarn add swing

Создан файл js для реализации поведения считывания карт. Не смог пойти дальше, потому что вначале я должен использовать экземпляр Swing.Stack() (предоставленный библиотекой), но браузер не распознает это.

js файл выглядит так:

javacript/deck.js

import Swing from "swing";

const card = document.querySelectorAll(".card") 

const stack = Swing.Stack();

Я включаю свой модуль deck.js в файл записи, который объединяет webpack:

javascript/packs/application.js 

import "bootstrap";
import "../deck.js";

И ошибка, которую я получаю в консоли, говорит:

deck.js:9 Uncaught TypeError: Cannot read property 'Stack' of undefined
    at Object.<anonymous> (deck.js:9)
    at Object.defineProperty.value (deck.js:51)
    at __webpack_require__ (bootstrap d955d73d3325972391a3:19)
    at Object.<anonymous> (application.js:1)
    at __webpack_require__ (bootstrap d955d73d3325972391a3:19)
    at bootstrap d955d73d3325972391a3:62
    at bootstrap d955d73d3325972391a3:62

Спасибо большое за вашу помощь!


ruby-on-rails webpack npm yarnpkg package.json
person Eduardo Salazar Miranda    schedule 31.03.2018    source источник
comment
Можно ли добавить инструкции для воспроизведения этой ошибки, начиная с нового приложения Rails?   -  person James Hibbard    schedule 02.04.2018
comment
@JackZelig, я только что добавил их! Большое спасибо! Если вам нужна другая информация, дайте мне знать!   -  person Eduardo Salazar Miranda    schedule 02.04.2018
comment
Спасибо чувак. Если вы используете синтаксис CommonJS, все должно работать, то есть измените import Swing from "swing"; на const Swing = require("swing");. Можете ли вы попробовать изменить это и дайте мне знать, решит ли это вашу проблему.   -  person James Hibbard    schedule 02.04.2018
comment
@JackZelig Да! это сработало! Ты лучший. Есть ли причина, по которой импорт не работает? Большое спасибо.   -  person Eduardo Salazar Miranda    schedule 02.04.2018
comment
Хорошо, чувак, приятно слышать. Позвольте мне добавить правильный ответ (было бы неплохо, если бы вы его приняли).   -  person James Hibbard    schedule 02.04.2018

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно будет использовать синтаксис CommonJS, что означает изменение оператора импорта следующим образом:

import Swing from "swing";

к этому:

const Swing = require("swing");

Причина, по которой использование import не работает, заключается в том, что этот модуль делает себя доступным для использования другим кодом.

Если вы откроете node_modules/swing/package.json в своем проекте Rails, вы увидите, что точка входа для модуля (свойство main) имеет значение «./dist/index.js».

Если вы затем откроете dist/index.js, вы увидите, что модуль использует синтаксис CommonJS (это означает, что синтаксис ES6 просто недоступен):

exports.Card = _Card2.default;
exports.Direction = _Direction2.default;
exports.Stack = _Stack2.default;

Ссылка: https://nodejs.org/docs/latest/api/modules.html#modules_exports

person James Hibbard    schedule 02.04.2018