如何使用yarn将date-fns JS库导入Rails项目

问题描述

我尝试使用 date-fns 将 yarn lib 导入 Rails 项目，但没有成功。

我使用 yarn 安装 date-fns：

yarn add date-fns

安装它们后，我尝试将此库导入 app/javascript/packs/application.js 文件，但没有成功：

// This file is automatically compiled by Webpack,along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//

import 'core-js/stable';
import 'regenerator-runtime/runtime';
import format from "date-fns/format";

我有一个错误：

> format(new Date(2014,1,11),'yyyy-MM-dd')
> VM498:1 Uncaught ReferenceError: format is not defined
    at <anonymous>:1:1

如果我尝试使用 app/assets/javascripts/application.js 文件导入它：

//= require jquery3
//= require jquery_ujs
//= require popper
//= require bootstrap
//= require date-fns/format

console.log("date-fns",format(new Date(2014,"yyyy-MM-dd"));

似乎库已连接，因此我可以调用方法 format，但出现另一个错误：

> Uncaught ReferenceError: exports is not defined
# refers to this line 
>  Object.defineProperty(exports,"__esModule",{
>   value: true
>  });
> exports.default = format;

# and 

> Uncaught TypeError: Cannot read property 'default' of undefined
# refers to this line 
> function format(dirtyDate,dirtyFormatStr,dirtyOptions) {
>  (0,_index10.default)(2,arguments);

我做错了什么？

解决方法

在 Webpack 和 Rails 中导入库的方法是通过 yarn 安装它，就像你所做的那样，然后在应用程序包中 require 它。

# console
$ yarn add date-fns

# app/javascript/packs/application.js
require("date-fns")