Rails/Webpack:无法访问 JS 库 [英] Rails/Webpack: Can't access a JS library

问题描述

我正在尝试访问 Rails 应用程序中的 strftime JS 库.我已按照 说明 操作如何使用 yarn add 并且我在我的一个 React 组件中添加了一个 debugger 语句，以便我可以尝试通过控制台访问它.strftime 未定义，说明中说明了需要它:

I'm trying to access the strftime JS library in my Rails application. I've followed the instructions on how to add it using yarn add and I've added a debugger statement in one of my react components so I can try and access it through the console. strftime is not defined and the instructions say this about requiring it:

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，我应该能够只是做一些事情:

I believe require is a node.js thing because you can't "require" code in the browser. It states that its not needed in the browser but the instructions also say to add it as a <script> tag but if I have the webpacker gem, I should be able to just do something like:

import strftime from 'strftime'

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

in my application.js file right?

从我的 Rails 应用中的 node_modules 访问库需要什么?

What is required to get access to a library from node_modules in my Rails app?

一些上下文:这是一个运行 Rails 5.2.3 的现有应用程序，目前正在从链轮/资产管道迁移到带有 Webpack(er) 的 React 组件.

Some context: This is an existing application running Rails 5.2.3 which is currently being migrated from sprockets/asset pipeline to React components with Webpack(er).

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

I've updated my environment.js file using the answer from @thanhnha1103.

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

If I open my app in Chrome for example and go to the console and type strftime it says strftime is not defined. However, if I add a debugger instruction in my application.js file just after import strftime from 'strftime' I get access to two objects called strftime__WEBPACK_IMPORTED_MODULE_0__ and strftime__WEBPACK_IMPORTED_MODULE_0___default.

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

Now if I do this in console while the JS has stopped because of debugger:

strftime = strftime__WEBPACK_IMPORTED_MODULE_0__

我可以访问一个名为 strftime 的函数，这是我的预期目的.(我还必须在我的 React 组件中导入 strftime 才能访问它，但这可能是预期的.关于如何在我的 应用程序中不这样做的情况下开箱即用的任何想法.js 文件?:

I have access to a function called strftime which is my intended purpose. (I also have to import strftime in my react component to get access to this but that's probably as intended. Any ideas about how to make this work out of the box without doing this in my application.js file?:

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

推荐答案

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

You should try this in your config files:

// 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 库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！