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

Posted 2023-02-16

【中文标题】尝试在 application.js 中导入 npm 包 (easyMDE) 时出错 - （未捕获的 ReferenceError：EasyMDE 未定义）

【英文标题】：Error when trying to import npm package (easyMDE) in application.js - (Uncaught ReferenceError: EasyMDE is not defined)

【发布时间】：2020-12-01 04:33:51

【问题描述】：

我试图在我的 rails 6 项目中包含 easyMDE。我之前从外部来源包含它并且有效（通过 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

【参考方案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;

【讨论】：

我必须把import * as EasyMDE from 'easymde';放在哪里？我在 application.js 中尝试过，但仍然是同样的错误。

hmm，你在哪里用的EasyMDE，我觉得你应该在这个文件中导入，我用console.log(easyMDE)做了一个简单的测试，效果很好

我在 application.js 文件中测试过，代码看起来像this

如果你想在 application.js 中导入它，你可以尝试在导入后添加window.EasyMDE = EasyMDE;，但我不确定这是最佳实践，因为你可以在任何地方访问

我已经编辑了，如果你能标记我的答案，谢谢：D