如何将库添加到 webpacker 以在 Stimulus JS 控制器中使用答案

【问题标题】：How to add a library to webpacker to use in Stimulus JS Controllers如何将库添加到 webpacker 以在 Stimulus JS 控制器中使用
【发布时间】：2019-06-27 18:53:59
【问题描述】：

我想在我的Stimulus js 控制器中使用dayjs 库（instead of moment)，但我不断收到一条错误消息：

dayjs 没有定义

setNextVisit(event) {
  console.log( dayjs().format('YYYY-MM-DD') );
}

我正在使用带有 Webpacker 和 Stimulus 的 Rails 5.2。

我通过 yarn add dayjs --save 添加了 dayjs，并将其添加到 /package.json：

/package.json

{
  "name": "meh",
  "private": true,
  "dependencies": {
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "3.5",
    "dayjs": "^1.8.2"
    "stimulus": "^1.1.1",
    "turbolinks": "^5.2.0"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2"
  }
}

为了通过 webpacker gem 连接 webpack 中的 dayjs，我已将此添加到 /app/javascript/packs/application.js:

/app/javascript/packs/application.js

/* eslint no-console:0 */

// @RAILS/UJS
// imported in config/webpack/environment.js
Rails.start();

// TURBOLINKS
import Turbolinks from 'turbolinks';
Turbolinks.start();

// DAYJS
import dayjs from 'dayjs'

// STIMULUS
import { Application } from 'stimulus'
import { definitionsFromContext } from "stimulus/webpack-helpers"


const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

【问题讨论】：

标签： javascript ruby-on-rails webpack stimulusjs

【解决方案1】：

您需要在刺激控制器中导入 dayjs，而不是在主 application.js 中

你的控制器应该是这样的：

import { Controller } from "stimulus";
import dayjs from 'dayjs'

export default class extends Controller {    

  SetNextVisit(event) {
    console.log( dayjs().format('YYYY-MM-DD') );
 }

}

这不是特定于 Stimulus，而是 ES6 JS 的工作原理

【讨论】：