如何在Glitch中使用静态导入? [英] How to use static imports in Glitch?
问题描述
在我生命中，我无法理解如何在一个简单的Glitch.com项目中使用ES6静态导入.我发现了这个项目有人使用静态导入而没有 节点模块或未安装任何组件的情况.
For the life of me, I can't understand how to use ES6 static imports in a simple Glitch.com project. I found this project where someone uses a static import with no extra node modules or anything installed.
我基本上想现在在一个新的Glitch项目上运行 same 示例.
I basically want to run the same example on a new Glitch project now.
我尝试安装各种节点模块和软件包以支持这些导入.这是我当前来自package.json的依赖项列表:
I've tried installing all sorts of node modules and packages to support these imports. Here's my current list of dependencies from my 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项目的环境中，有什么不同吗?
I've spent hours trying to find a solution, but most seem to use outdated packages. Is there something that's different in the environment of the project I linked and that of a new Glitch project now?
推荐答案
从Flavio链接的Glitch项目是一个静态站点，没有后端，package.json或服务器.这是ES6模块的一个很好的例子，但是如果您使用Express(我假设它是基于package.json的存在)，则转换该例子可能并不明显.
The Glitch project you linked from Flavio is a static site with no backend, package.json or server. It's a great example of ES6 modules but if you're working with Express (I assume so based on its presence in your package.json), converting the example may be non-obvious.
我注意到您的package.json中也有TS，但我不想太自以为是，所以为了传达最简单的设置，我会坚持使用香草.在Glitch上尝试.
I notice you also have TS in your package.json, but I don't want to be too presumptuous so I'll stick to vanilla in the interests of communicating the simplest possible setup. 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 ，主要修改是将 type ="module" 添加到< script> 标签:
views/index.html, main modification is adding type="module" to the <script> tag:
<!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 ，基本上未更改默认值:
server.js, basically unmodified from the default:
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 ，也未更改为默认值:
package.json, also unmodified from the default:
{
"//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"
]
}
这篇关于如何在Glitch中使用静态导入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
