Question

我正在尝试访问Rails应用程序中的strftime JS库。我已经遵循instructions的用法，如何使用yarn add添加它，并且在我的一个react组件中添加了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的现有应用程序，当前正在通过Webpack（er）从链轮/资产管道迁移到React组件。

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

例如，如果我在Chrome中打开我的应用，然后转到控制台并键入strftime，则其显示为strftime is not defined。但是，如果我在debugger之后的application.js文件中添加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;

Rails / Webpack：无法访问JS库

1 个答案: