Rails 5.1 Webpacker – 通过 yarn 添加 moment.js – 如何在旧资产 JS 中使用包答案

【问题标题】：Rails 5.1 Webpacker – added moment.js via yarn – how to use package in old asset JSRails 5.1 Webpacker – 通过 yarn 添加 moment.js – 如何在旧资产 JS 中使用包
【发布时间】：2018-01-02 09:38:33
【问题描述】：

我是 webpacker 和 yarn 的新手。我成功安装了这个包：

加纱时刻

EDIT2：

这是我的进口

# app/javascript/packs/application.js
import moment from 'moment/moment'
import 'moment/locale/de-ch'

问题：我无法在旧的 JS 资产文件中使用“moment”包

第一个有效，另一个无效：

# in: app/javascript/packs/application.js
console.log('Log: ' + moment([2007, 0, 29]).toNow()) #=> Log: in 10 Jahren

# in app/*assets*/javascripts/application.js
console.log('Log2: ' + moment([2007, 0, 29]).toNow()) #=> Uncaught ReferenceError: moment is not defined

EDIT1：

这里是webpacker安装过程的重点：

在 gemfile 中：gem 'webpacker'，github：'rails/webpacker'
将此行添加到 assets.rb：Rails.application.config.assets.paths
在 application.html.haml 的 %head 中添加：= javascript_pack_tag 'application'
重启 Rails 服务器并启动 webpacker

注意：我将我的应用程序从 Rails 4.2 升级到 5.0 和更高版本到 5.1；也许我的应用程序中缺少某些东西

【问题讨论】：

我在常规资产 JS 文件中使用 moment.js：app/assets/javascript/.coffee
你试过import { moment } from 'moment/moment'吗？
@palma 我现在做了；仍然是错误
我是否必须将旧的“资产”树包含到 webpacker 中？我今天安装了 webpacker，它不是一个新的 rails 应用程序
你能导入任何其他组件，库吗？你如何测试时刻的导入，我已经尝试了你的第二种方法并且它有效。

标签： javascript ruby-on-rails webpacker

【解决方案1】：

我有一个类似的问题，即在整个 app/assets/javascript 文件中都使用了 momentjs，并且它是通过 gem 包含的（实际上，更糟糕的是，rails-assets）。看起来我们都需要时刻对象在全球范围内可用，而不仅仅是在包内。因此，以下内容为我解决了这个问题，我会一直保留它，直到我摆脱 app/assets/javascript 文件。

import moment from 'moment'

window.moment = moment

【讨论】：

我到处寻找答案。感谢您发布修复！
在新更新的 Rails 6 应用程序中从 sprockets 迁移到 Webpacker。这对我有帮助。谢谢。

【解决方案2】：

首先我认为这是一个解决方案，但事实并非如此：https://github.com/rails/webpacker#resolved-paths

在“/config/webpacker.yml”中我添加了这个：

# /config/webpacker.yml    
resolved_paths: ['app/assets']

这里我导入了使用“moment.js”的文件：

# /app/javascript/packs/application.js
import 'javascripts/<folder>/<some_file_uses_moment>.coffee'

=> 还是错误

后来我找到了这篇文章： http://samuelmullen.com/articles/embracing-change-rails51-adopts-yarn-webpack-and-the-js-ecosystem/

资产管道发生了什么？长话短说：没什么。你仍然可以像往常一样使用资产管道——“如果你就像您的资产管道一样，您可以保留您的资产管道”。那包括 javascripts/ 目录。你甚至可以混合打包的文件在您的视图中使用“流水线”文件。 你不能包括你的将文件打包到您的“流水线”文件中；嗯，不容易。

似乎我不能将“moment”包与“旧”资产 JS 混合（？）

【讨论】：