Rails webpacker 导入问题答案

【问题标题】：Rails webpacker import issuesRails webpacker 导入问题
【发布时间】：2019-07-23 18:27:11
【问题描述】：

我正在尝试在我的 rails 应用程序中使用名为 jsViewer 的 javascript 库。

如果我直接在我的 HTML 中导入库，我使用该库没有问题。

例如 HTML

<script type="text/javascript" src="../src/javascript/JSViewerLoader.js"></script>
<script type="text/javascript" src="../src/javascript/docxjs/DocxJS.bundle.min.js"></script>

但是，当我尝试使用通过 webpacker 导入的库时收到开发者控制台错误。

例如 application.js

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

import Rails from 'rails-ujs';
import Turbolinks from 'turbolinks';
Rails.start();
Turbolinks.start();

import '../src/javascript/JSViewerLoader.js'
import '../src/javascript/docxjs/DocxJS.bundle.min.js'

为什么会发生这种情况，我该如何解决这个问题？

【问题讨论】：

标签： ruby-on-rails webpacker

【解决方案1】：

使用 rails 6 中的 javascript pack，您可以使用两个简单的步骤手动添加您的 js 库

添加js文件到app/javascript/packs
然后，您可以在 app/javascript/packs/application.js 中使用

require('packs/JSViewerLoader.js');

或者，您可以使用yarn先安装js文件。然后，稍后导入。（您的库似乎不支持这种安装）例如

# Run this on your terminal
yarn install aJsLibrary

# add this line to your app/javascript/packs/application.js
window.aJsLibrary = require('aJsLibrary');

【讨论】：

使用 require 和 import 有什么区别？