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

[ninvfeng2020]

• 现在的大多前端项目一上来必须 npm install

• 这就要求你得先装 node

• 为了更好的 npm install, 你可能会装 yarn,cnpm, pnpm

• 为了下得更快, 你找到了 nrm 这个快速换源的工具

• 结果在安装的时候提示你 node 版本不对, 你为了维护不同的版本又装了 nvm 来管理 node 环境

• 终于你运行起来了, 想要发布, 你还得 npm run build

• 这还没开始呢, node_modules 就占好几百 M 了

• 也不是说这种方式不好, 自己也一直这么用, 已经习惯了, 且页面多逻辑复杂的大项目不可避免

• 但在做一些界面简单, 只有一两个页面的应用的时候是不是可以直接在一个 index.html 内完成呢

• 比如产品介绍,搜索引擎主页,短链接生成, 图床之类

• 如果这个思路可行, 有哪些库可以帮助更方便快速搭建起一个项目呢

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

[ChefIsAwesome]

？？

[echoless]

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

[duke807]

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

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

-h 指定网站目录

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


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

[duke807]

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

[kdwnil]

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

[porea]

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

[Mutoo]

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

[codehz]

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

[crysislinux]

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

[dudubaba]

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

[cmdOptionKana]

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

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

[MMMMMMMMMMMMMMMM]

我猜楼主是 GenZ

[yyf1234]

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

[DOLLOR]

纯 vanilla 开发，别用 jquery ！

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

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

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

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

[wqzjk393]

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

[seakingii]

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

[ninvfeng2020]

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

[echoless]

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

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

[duke807]

@ninvfeng2020

http://vanilla-js.com/

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

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

[ninvfeng2020]

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

[retrocode]

时代的眼泪呦

[DOLLOR]

<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]

@DOLLOR

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

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

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

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

[xiangyuecn]

最低配置，只需要一个 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]

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

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

[learnshare]

前端始于 npm ？

[ninvfeng2020]

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

[Pastsong]

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

[AyaseEri]

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

[Hanggi]

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

[vruzo]

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

[HugoChao]

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

[zinete]

一看你就没有用 PS 切过图

[zhensjoke]

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

[ninvfeng2020]

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

[jeffwcx]

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

[cyitao]

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

[molvqingtai]

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

[HiCode]

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

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

[horizon]

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

[sparkinglemon]

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

https://alpinejs.dev/

[hervey0424]

jquery 搞起啊

[wangtian2020]

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

[yuedun]

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

[CarryOnHxy]

petitevue