Error when trying to import npm package (easyMDE) in application.js - (Uncaught ReferenceError: EasyMDE is not defined)

Question

我正在尝试将 easyMDE 包含在我的 rails 6 项目中。我之前从外部来源包含它并且有效（通过 unpkg.com）。为了缩短加载时间，我想通过 yarn 将其包含到我的项目中。

我做了以下步骤：

 yarn add easymde --save

在application.js:

require("easymde");

但是在重新加载页面时出现以下错误：

Uncaught ReferenceError: EasyMDE is not defined

当我运行 webpack-dev-server 我看到 easymde.js 被编译：

Built at: 08/11/2020 3:16:09 PM
                                 Asset       Size         Chunks                              Chunk Names
js/application-caadc00338c3578fee39.js       1.2 MiB      application  [emitted] [immutable]  application
js/application-caadc00338c3578fee39.js.map   1.39 MiB     application  [emitted] [dev]        application
js/easymde-1f6737d8a160c1180536.js           872 KiB      easymde      [immutable]            easymde
js/easymde-1f6737d8a160c1180536.js.map       805 KiB      easymde      [dev]                  easymde
                         manifest.json       675 bytes                 [emitted]              
ℹ ｢wdm｣: Compiled successfully.

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.
 
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

require("easymde")

package.json:

{
  "name": "logbook_v2",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "easymde": "^2.11.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

让我知道您是否需要更多代码。 :-)

更新

这是我使用编辑器的文件：

<%= render "components/sidebar" %>
<div class="form-wrapper post-form-wrapper">
  <%= form_with model: @post, class: 'form post-form' do |f| %>
    <%= f.text_field :name, placeholder: 'title', class: 'field post-field' %>
    <%= f.text_area :content, id: 'mde' %>
    <%= f.submit 'create post', class: 'form-button post-form-button' %>
  <%end%>
</div>

<script type="text/javascript" charset="utf-8">
    var easyMDE = new EasyMDE({
        element: document.getElementById("mde"),
        placeholder: "Write your post here...",
        autosave: {
            enabled: true,
            uniqueId: <%= current_user.id %>
        },
        blockStyles: {
            code: "~~~"
        },
        minHeight: "calc(100vh - 320px)",
        renderingConfig: {
            codeSyntaxHighlighting: true
        },
        promptURLs: true,
        toolbar: ["bold", "italic", "strikethrough", "heading", "|", "code", "quote", "clean-block", "|", "link", "image", "|", "unordered-list", "ordered-list", "|", "preview", "side-by-side", "fullscreen", "|", "guide"]
    });
</script>

如果我在脚本开头输入 import * as EasyMDE from 'easymde';（@Ninh Le 建议），我会收到此错误：Uncaught SyntaxError: import declarations may only appear at top level of a module

Answer 1

Easymde 使用 module.exports, 你可以找到它 here 所以要在 yarn 和 rails 6 中使用它，我认为方法在 js 文件中：

import * as EasyMDE from 'easymde';
var easyMDE = new EasyMDE({element: document.getElementById('my-text-area')});

编辑：为了让它可以全局调用，在application.js文件中调用这个

import * as EasyMDE from 'easymde';
window.EasyMDE = EasyMDE;

Error when trying to import npm package (easyMDE) in application.js - (Uncaught ReferenceError: EasyMDE is not defined)

Error when trying to import npm package (easyMDE) in application.js - (Uncaught ReferenceError: EasyMDE is not defined)

ruby-on-rails

yarnpkg

webpacker