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

Question

我在Rails上的项目中添加了一个名为Swing的npm库。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和设计用于身份验证的gem )：

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 

用于邮政的生成控制器

rails g controller posts 

controllers/posts_controller.rb 

def index
  //generates posts to display 
end 

生成posts索引视图。

/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();

我在webpack捆绑的条目文件中包含了我的deck.js模块：

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;

参考文献：exports