如果不使用 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 内完成呢

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

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

[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 什么事了啊 //