如果不使用 node npm 仅在 index.html 构建一个简单的 web 应用, 是否可行?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 633 天前的主题，其中的信息可能已经有所发展或是发生改变。

现在的大多前端项目一上来必须 npm install
这就要求你得先装 node
为了更好的 npm install, 你可能会装 yarn,cnpm, pnpm
为了下得更快, 你找到了 nrm 这个快速换源的工具
结果在安装的时候提示你 node 版本不对, 你为了维护不同的版本又装了 nvm 来管理 node 环境
终于你运行起来了, 想要发布, 你还得 npm run build
这还没开始呢, node_modules 就占好几百 M 了
也不是说这种方式不好, 自己也一直这么用, 已经习惯了, 且页面多逻辑复杂的大项目不可避免
但在做一些界面简单, 只有一两个页面的应用的时候是不是可以直接在一个 index.html 内完成呢
比如产品介绍,搜索引擎主页,短链接生成, 图床之类
如果这个思路可行, 有哪些库可以帮助更方便快速搭建起一个项目呢

第 1 条附言 · 2023-02-27 21:21:49 +08:00

并没有要回到原始时代的意思, 像 vue, tailwind css, axios 等主流的库都是有提供 cdn 的使用方式, 如果在一些相对简单场景下如果用一个 html 能完成, 然后开发部署比用 npm run 更简单, 那我觉得还是可以去探索一下这种方式

45 条回复 • 2023-02-28 15:29:43 +08:00

ChefIsAwesome

2023-02-27 19:36:15 +08:00

？？

echoless

2023-02-27 19:36:17 +08:00 via Android

node 爹的第二个儿子 deno 已经给你准备好了

duke807

2023-02-27 19:37:40 +08:00

最简单的起服务器的方法（而且还支持 cgi ）：busybox httpd -f -h . -v -p 8080

-f 是不切后台，配合 -v 方便看打印信息

-h 指定网站目录

-p 指定端口，不加默认 80 端口

如果想要 https ，还可以用 stunnel 反代到 80 端口

duke807

2023-02-27 19:39:51 +08:00

代码则用 vanilla js ，css 用 bulma ，文本编辑器手撸

kdwnil

2023-02-27 19:41:17 +08:00 via Android

什么返璞归真，这样做当然可以，不就是 vanillajs 嘛

porea

2023-02-27 19:42:27 +08:00

vanilla js + bootstrap 够了吧最多加个 jquery

Mutoo

2023-02-27 19:45:48 +08:00 via iPhone

当然可以使用 unpkg cdn 引入各种 lib 就行了。在 codepen 上的 project 大多都是这么玩的

codehz

2023-02-27 19:46:59 +08:00 via iPhone

不仅可以，你还能直接用 npm 上的库
使用 esm.sh 来引用
用上熟悉的 import 语法
(就是记得写 script type=module

crysislinux

2023-02-27 19:49:07 +08:00 via Android

抱怨前端这些东西的人就很奇怪。浏览器又没有不准你直接写。

dudubaba

2023-02-27 19:55:04 +08:00

肯定可以，就看你用不用了，国外的 bootstrap ，国内的 layui ，都是 jquery 时代流行的，现在也很多后端在用。前端其实是逼着 “花”，不花就落后了饭碗都没了。

cmdOptionKana

2023-02-27 19:58:23 +08:00

当然可以，而且，对于大多数网站来说，jQuery 就足够好用了，vue/react 的优势不大。

举个例子，这个 V2EX 的前端就是走传统的模式，挺好的。

MMMMMMMMMMMMMMMM

2023-02-27 20:01:54 +08:00

我猜楼主是 GenZ

yyf1234

2023-02-27 20:09:52 +08:00 via iPhone

啊？！，难道你前端是从 npm 开始学的吗

DOLLOR

2023-02-27 20:15:57 +08:00

纯 vanilla 开发，别用 jquery ！

你需要的不是哪些库来搭建项目，而是一个文本编辑器，最好是 vscode 。因为它可以自动提示代码，节约敲击代码时间。

然后是一个浏览器，chrome 和 firefox 都行。

别听上面的教你搭 http 服务器的，因为 file:/// 协议就能预览效果了，本地还搭 http 服务器都是多此一举！

剩下的，就是上 MDN 查 API 了，无论是 web api ，js 特性，css 特性，html 特性，那里全都有了，别去看什么菜鸟教程。

wqzjk393

2023-02-27 20:18:10 +08:00 via iPhone

直接 html js css 三件套，然后配置 nginx 就完事了

seakingii

2023-02-27 20:24:01 +08:00

确实可以，而且从有 HTML 以来就是可以这么干的。
你不怕乱的话，可以在一个 html 里集成 html , js ,css 代码。
可以直接 CDN 引用一些外部库。这样最终只有一个 HTML 文件，界面不复杂的话很方便。

ninvfeng2020

2023-02-27 20:24:59 +08:00

@duke807 还找了半天这个 vanilla js, 结果是原生 js 😭

echoless

2023-02-27 20:25:26 +08:00

@echoless #2 看了别的回复我发现我错了.

楼主今天你对前端的理解要有质的飞跃了.

duke807

2023-02-27 20:29:21 +08:00

@ninvfeng2020

http://vanilla-js.com/

文本编辑器 gedit 手撸，用到第 3 方的库，我会下载第 3 方的库的 js 和 css 文件，加上对应版本号，和我自己写的 html js 一起发布。

这些第 3 方的库通常可以 npm 安装，但是我一般不使用 npm 。

ninvfeng2020

2023-02-27 20:30:47 +08:00

@dudubaba @cmdOptionKana 还是希望能在这基础上用上主流的技术, 比如 vue3 也是可以通过 script 标签引入使用的

retrocode

2023-02-27 20:32:14 +08:00

时代的眼泪呦

DOLLOR

2023-02-27 20:32:35 +08:00

<h4>示例：手撸一个本地视频播放器，不用 node 、npm</h4>
<br>
<input type="file" accept="video/*">
<br>
<video controls></video>
<script>
void (function () {
const fileEle = document.querySelector('input');
const videoEle = document.querySelector('video');

fileEle.onchange = () => {
const file = fileEle.files[0];
const videoUrl = URL.createObjectURL(file);
videoEle.src = videoUrl;
videoEle.oncanplaythrough = () => {
videoEle.play();
URL.revokeObjectURL(videoUrl);
};
};
})();
</script>

duke807

2023-02-27 20:36:02 +08:00

@DOLLOR

本地 file:// 有很多限制，譬如写 pwa 程序，存储 indexed db ，还有很多其它的限制。。。

又譬如测试 cgi 的 api 接口，通过 web 局域网上传下载文件之类的。。。

busybox 内置的 httpd 甚至可以用于生产环境

当然，能直接 file:// 没问题的时候，当然是直接把 html 文件拖拽到浏览器。。。

xiangyuecn

2023-02-27 20:40:58 +08:00

最低配置，只需要一个 notepad 就够了😁

欢迎使用 HTML5 网页版 ACME 客户端 https://xiangyuecn.gitee.io/acme-html-web-browser-client/ACME-HTML-Web-Browser-Client.html

本网页客户端（仅一个静态 HTML 网页文件）用于：向 Let's Encrypt 、ZeroSSL 等支持 ACME 协议的证书颁发机构，免费申请获得用于 HTTPS 的 SSL/TLS 域名证书（ RSA 、ECC/ECDSA ），支持多域名和通配符泛域名；只需在现代浏览器上操作即可获得 PEM 格式纯文本的域名证书，不依赖操作系统环境（ Windows 、macOS 都能用），无需下载和安装软件，无需注册登录，纯手动操作，只专注于申请获得证书这一件事，简单易用，非常适用于希望手动快捷申请获得证书的使用场景。

本网页客户端仅一个静态 HTML 文件，不依赖其他任何文件；因此可以直接保存到你本地，即可通过浏览器打开。

cmdOptionKana

2023-02-27 20:44:33 +08:00

@ninvfeng2020 你要是希望用主流技术，就不要抗拒 npm, webpack 那一堆东西，因为那些就是主流，而完全脱离 npm 取用 vue 等技术，这种玩法已经不是主流了。

因此，你想清楚你要的是主流还是简单方便，如果重点是简单方便，真没必要用 vue 那些，类似 V 站这样的复杂度，用 jquery 方便极了，vue 带来不了任何好处。

learnshare

2023-02-27 20:45:33 +08:00

前端始于 npm ？

ninvfeng2020

2023-02-27 21:21:27 +08:00

Pastsong

2023-02-27 21:26:30 +08:00

10 年前的前端不都是抄起一个 index.html （更有可能是 index.php ）就开始搞的那有什么工程化的东西

AyaseEri

2023-02-27 21:55:40 +08:00

偷偷告诉你，只要你建好文件夹，vscode 有个 server 插件，你连 nginx 都不需要就能开始搞开发了。
然后祝你好运。

Hanggi

2023-02-27 22:00:09 +08:00

Node.js 出来之前就是这么做的呀？

vruzo

2023-02-27 22:44:10 +08:00 via Android

冒昧问一下，楼主几年经验前端的

HugoChao

2023-02-27 22:45:33 +08:00

以前都这么干啊，但是经过无数人的验证，还是 node 下开发好

zinete

2023-02-27 22:52:34 +08:00

一看你就没有用 PS 切过图

zhensjoke

2023-02-27 22:53:59 +08:00 via iPhone

我刚学那会 html 用记事本都可以撸。

ninvfeng2020

2023-02-27 23:07:52 +08:00

@vruzo 多年 PHP, 前端写的不多

jeffwcx

2023-02-27 23:09:02 +08:00

我大学的时候就是这么干的呀，那时候就是 jQuery ，还写了一些 widget ，后面才慢慢有 node 的。我只想说，那时候真的乱来

cyitao

2023-02-27 23:14:28 +08:00

小页面随便怎么写，上规模的应用必须上全套。如果没有打包的过程，代码模块化程度不够，屎山就堆起来了。打包给前端带来的是 sass 、模块化、代码压缩等等一系列的功能。

molvqingtai

2023-02-27 23:51:06 +08:00

当然可以，你还可以使用 WebComponent 写原滋原味的组件化页面

HiCode

2023-02-28 00:11:26 +08:00

可行，如果想使用 vue 的话，推荐我这个 https://github.com/dongnanyanhai/vue-web-loader-2

可以在不使用前端工具(如 npm,webpack 等)的情况下，快速构建基于 Vue 的单页面应用，具有以下优点：依赖小、支持 vue 单页面组件、支持动态加载组件。

horizon

2023-02-28 09:06:20 +08:00

可是打包好后，就没 node_modules 什么事了啊 //

sparkinglemon

2023-02-28 10:48:10 +08:00

咋说呢，前端其实不管工具链怎么变，最后都是归结到 html+js+静态文件。
即便是现代打包工具如 webpack 、vite ，也是把这些散落在项目各个文件里的资源“转换”到应该在的位置。
Vue 这种可以通过 cdn 引入不假，但是确实写法上很别扭，
楼主可以看看 alpine.js ，前一阵刚做了一个 php 模板的项目，实在是比较陈旧没法用 Vue/Reac ，硬着头皮用了 v2 的 alpine ，效果还不错。

https://alpinejs.dev/

hervey0424

2023-02-28 11:04:25 +08:00

jquery 搞起啊

wangtian2020

2023-02-28 11:29:15 +08:00

😓node 能有啥版本问题，自己不愿意去直面依赖包管理，估计你们项目还在用 node-sass 吧

yuedun

2023-02-28 14:26:38 +08:00

用一个文件夹存放 index.html ，顶多再加上 css,js 。把文件夹塞到 nginx 默认 html 目录下

CarryOnHxy

2023-02-28 15:29:43 +08:00 via iPhone

petitevue