请问如何编译 import 的其他包的内容

shd101wyy commented 4 years ago

首先非常感谢开发者做出了这么惊艳的 WYSIWYG Markdown 编辑器。现在我正在尝试编写一些 powerpacks，例如下面这个 echarts 的 powerpack：

import * as CodeMirror from "codemirror";
import {
  registerRenderer,
  CodeRenderer,
  getAddon as getFoldCode
} from "../addon/fold-code";
import { getAddon as getFold } from "../addon/fold";
import * as YAML from "yamljs";

export const EchartsRenderer: CodeRenderer = (code, info) => {
  var id = "_echarts_id_" + Math.round(1e9 * Math.random()).toString(36);

  var el = document.createElement("div");
  el.setAttribute("id", id);
  el.style.width = "400px";
  el.style.height = "400px";

  try {
    let option = {};
    if (code.trim()[0] !== "{") {
      option = YAML.parse(code);
    } else {
      option = JSON.parse(code);
    }
    const myChart = window["echarts"].init(el);
    myChart.setOption(option);
    info.changed();
  } catch (error) {
    el.innerText = error.toString();
  }
  return el;
};

if (window["echarts"]) {
  CodeMirror.defineOption("echarts", null, (cm: CodeMirror.Editor) => {
    getFoldCode(cm).clear("echarts");
    getFold(cm).startFold();
  });

  registerRenderer({
    name: "echarts",
    pattern: /^echarts$/i,
    renderer: EchartsRenderer,
    suggested: true
  });
} else {
  console.error("[HyperMD] PowerPack fold-code-with-echarts failed to load.");
}

代码比较丑陋，简单来讲我尝试 yarn add yamljs 然后在 ts 文件中引用了它：

import * as YAML from "yamljs";

但是当我尝试编译时（yarn build），我得到了以下的错误提示：

[HyperMD][WARN] Module "yamljs" is NOT accessible in plain browser env! Found in powerpack/fold-code-with-echarts.js

yarn dev 后打开的网页也显示了如下的错误：

Screenshot from 2019-12-09 16-29-18

请问这个问题该如何解决？

非常感谢！

shd101wyy commented 4 years ago

然后请问有没有办法 require 一些第三方的包，因为我看 require 的写法被禁用了，只能用 import。

我觉得主要还是因为我对 rollup 不太熟悉的缘故。

再次感谢！

shd101wyy commented 4 years ago

今天学习了下 rollup，貌似懂了。😂 打扰了

laobubu / HyperMD

请问如何编译 import 的其他包的内容 #67