尝试在application.js中导入npm包easyMDE时出错-未捕获的ReferenceError：未定义EasyMDE

问题描述

我正在尝试将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

解决方法

.js使用Easymde，您可以找到它here 因此，要在纱线和导轨6中使用它，我认为方法是在js文件中：

module.exports

编辑：要使其可以全局调用，请在application.js文件中调用

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