如何在 Glitch 中使用静态导入？答案

【问题标题】：How to use static imports in Glitch?如何在 Glitch 中使用静态导入？
【发布时间】：2019-12-10 17:20:48
【问题描述】：

对于我来说，我无法理解如何在一个简单的 Glitch.com 项目中使用 ES6 静态导入。我发现这个project 有人使用静态导入，没有额外的节点模块或安装任何东西。

我现在基本上想在一个新的 Glitch 项目上运行 same 示例。

我已经尝试安装各种节点模块和包来支持这些导入。这是我的 package.json 中的当前依赖项列表：

  "dependencies": {
    "express": "^4.15.2",
    "typescript": "^3.4.4",
    "@types/node": "^12.6.9",
    "@types/express": "^4.17",
    "babel-preset-env": "^1.7.0",
    "babel-eslint": "^10.0.1",
    "babel-core": "^6.26.3",
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-es2015-modules-systemjs": "*",
    "babel-node": "^6.5.3",
    "babel-register": "^6.26.0"
  },

我花了几个小时试图找到解决方案，但大多数似乎都使用过时的软件包。我链接的项目的环境和现在新的 Glitch 项目的环境有什么不同吗？

【问题讨论】：

嘿@suds-p！这是 Flavio 在 Glitch 上的 Express 风格应用程序中的概念证明的几乎逐个文件的副本：glitch.com/edit/#!/heathered-pint，但我想你的最终目标是一个更复杂的结果——正如你所说，你不需要任何 NPM包来实现这一点。（免责声明，我在 Glitch 工作）
@cori 谢谢！这很有帮助。我不确定他是如何在没有 NPM 包的情况下实现这一结果的，但我不介意，因为无论如何我都在我的项目中使用 NPM。
你有没有得到这个工作？ ES6 模块系统实际上运行在前端，因此不需要 NPM 包。很高兴听到更多关于您的用例或期望结果的信息——我看到您的 package.json 中有 TS，但该帖子没有另外提及这一点。我发布了一个最小的示例作为答案，但基于此很难判断它是否真的是您正在寻找的东西 - 我假设您只是想要一个概念验证，所以希望它就足够了。跨度>

标签： javascript html ecmascript-6 import

【解决方案1】：

您从 Flavio 链接的 Glitch 项目是一个没有后端、package.json 或服务器的静态站点。这是 ES6 模块的一个很好的例子，但是如果你正在使用 Express（我假设它存在于你的 package.json 中），转换这个例子可能不是很明显。

我注意到你的 package.json 中也有 TS，但我不想太冒昧，所以为了传达最简单的设置，我会坚持使用原版。 Try it on Glitch.

目录结构：

public
  math
    add.js
  index.js
  style.css
views
  index.html
server.js
package.json

public/math/add.js:

export default (a, b) => a + b;

public/index.js:

import add from "./math/add.js";

document.body.textContent = `1 + 2 = ${add(1, 2)}`;

views/index.html，主要修改是在<script>标签中添加type="module"：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="A cool thing made with Glitch">
    <title>Welcome to Glitch!</title>
    <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
    <link rel="stylesheet" href="/style.css">
    <script type="module" src="/index.js"></script>
  </head>
  <body>
  </body>
</html>

server.js，基本未修改默认：

const express = require("express");
const app = express();

app.use(express.static("public"));

app.get("/", (request, response) => {
  response.sendFile(__dirname + "/views/index.html");
});

const listener = app.listen(process.env.PORT, () => {
  console.log("Your app is listening on port " + listener.address().port);
});

package.json，也未修改默认值：

{
  "//1": "describes your app and its dependencies",
  "//2": "https://docs.npmjs.com/files/package.json",
  "//3": "updating this file will download and update your packages",
  "name": "hello-express",
  "version": "0.0.1",
  "description": "A simple Node app built on Express, instantly up and running.",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "engines": {
    "node": "12.x"
  },
  "repository": {
    "url": "https://glitch.com/edit/#!/hello-express"
  },
  "license": "MIT",
  "keywords": [
    "node",
    "glitch",
    "express"
  ]
}

【讨论】：