Rails/Webpack：无法访问 JS 库

Question

我正在尝试访问我的 Rails 应用程序中的 strftime JS 库。我已经关注了instructions 如何使用yarn add 添加它，并且我在我的一个反应组件中添加了一个debugger 语句，因此我可以尝试通过控制台访问它。 strftime 未定义，说明说明需要它：

var strftime = require('strftime') // not required in browsers
console.log(strftime('%B %d, %Y %H:%M:%S')) // => April 28, 2011 18:21:08
console.log(strftime('%F %T', new Date(1307472705067))) // => 2011-06-07 18:51:45

我相信 require 是 node.js 的东西，因为您不能在浏览器中“要求”代码。它声明它在浏览器中不需要，但说明还说将其添加为 <script> 标签，但如果我有 webpacker gem，我应该能够执行以下操作：

import strftime from 'strftime'

在我的application.js 文件中对吗？

在我的 Rails 应用程序中从 node_modules 访问库需要什么？

编辑：

一些上下文：这是一个运行 Rails 5.2.3 的现有应用程序，目前正在从 sprockets/asset 管道迁移到使用 Webpack(er) 的 React 组件。

我使用@thanhnha1103 的答案更新了我的environment.js 文件。

例如，如果我在 Chrome 中打开我的应用程序并转到控制台并输入 strftime，它会显示 strftime is not defined。但是，如果我在 application.js 文件中添加一条 debugger 指令，就在 import strftime from 'strftime' 之后，我可以访问两个名为 strftime__WEBPACK_IMPORTED_MODULE_0__ 和 strftime__WEBPACK_IMPORTED_MODULE_0___default 的对象。

现在，如果我在 JS 由于调试器而停止时在控制台中执行此操作：

strftime = strftime__WEBPACK_IMPORTED_MODULE_0__

我可以访问一个名为 strftime 的函数，这是我的预期目的。 （我还必须在我的 react 组件中导入 strftime 才能访问它，但这可能是预期的。关于如何在我的 application.js 文件中不这样做的情况下使这项工作开箱即用的任何想法？：

import strftime from 'strftime'
strftime = strftime__WEBPACK_IMPORTED_MODULE_0__
debugger // obviously I'll remove this later but this is for testing purposes.
console.log('Hello World from Webpacker')

// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

Answer 1

你应该在你的配置文件中试试这个：

// config/webpack/environment.js

const webpack = require('webpack');

const {environment} = require('@rails/webpacker');

environment.plugins.append(
  'ProvidePlugin-Strftime', // arbitrary name
  new webpack.ProvidePlugin({
    strftime: 'strftime'
  }),
);

module.exports = environment;