在 Rails 上使用外部 JavaScript 库时控制台出错。我正在使用 Webpack

Question

我使用 yarn 将一个名为 Swing 的 npm 库添加到我在 Rails 上的项目中。 https://github.com/gajus/swing

问题是，尽管使用新库编译成功，但我在控制台上收到错误消息，似乎无法使用该库的功能。

我正在使用 webpack 版本 3.11.0 和 Rails 5.1.5.

代码如下所示：

带有模板的新 rails 项目（包括 gems：https://github.com/lewagon/rails-templates/blob/master/minimal.rb 和用于身份验证的 Devise gem）：

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

为 Post

生成的模型

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>

添加了带有 Yarn 的 Swing npm 包（安装后 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

非常感谢您的帮助！

Answer 1

您需要使用 CommonJS 语法，这意味着将您的导入语句更改为：

import Swing from "swing";

对此：

const Swing = require("swing");

使用 import 不起作用的原因在于此模块使自身可供其他代码使用的方式。

如果您在 Rails 项目中打开 node_modules/swing/package.json，您会看到模块的入口点（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

在 Rails 上使用外部 JavaScript 库时控制台出错。我正在使用 Webpack

Error on console when using an external JavaScript library on Rails. I'm Using Webpack

ruby-on-rails

npm

webpack

package.json

yarnpkg