关于前端的思考和疑惑

rux_9527 — Tue, 04 Jan 2022 17:33:45 +0800

新人轻喷! 和大家一样，我很喜欢 Rails 框架.！但我不太欣赏这种前端深度融合模式！

总感觉深度融合前端，在一定程度上阻碍了框架的更流行？!!

2011 年 8 月 31 日，Rails 3.1 首次携 Asset Pipeline 机制发布，该组件主要能力是针对静态资源：编译、打包、哈希等，是当时比较领先的设计！虽说如此，但是据我了解，这个机制需要第三方前端库做适配，就是说要先修改再用 gem 包封装，作为用户者就必须得找第三方对应的 gem. 这是不是增加了入门坡度？原谅我不是太能理解，好在当时前端界打包还没成型，框架给大家带来了便利也提升了高度。像今天这样前端大统一，Rails 不得不重新审视组装自己的前端组件，某种程度上它阻碍了自身流行。

Asset Pipeline 在发布之前 Node 和 Npm 已经问世，2 年半以后 Webpack 也发布于众. 随着 ES6 模块化的普及和 http/2 规范出台，前端形势一片大好。Asset Pipeline 不再具有明显优势，反而劣势突出. 如今前端社区默认的打包工具是 webpack, Rails6 就将其集成进来制作了 webpacker. 抱歉，Rails7 中前端其他打包方案还不很了解，所以我针对 Rails6 梳理了些问题：

在这之前，我想先描述一下我对前端的理解思路：

抛出问题：webpack 是前端打包工具，而 npm 安装的包又是运行在 node 上的 js 包。那么：npm 安装的包是不是经过 webpack 打包而来的？比如 bootstrap、JQuery、vue 等。

是也不是？??! 理解关键点是：

a. webpack到底有什么功能 ==> 编译、压缩、打包
b. npm到底可以安装什么包 ==> node包还是browser上的库

前提: ES6 和 Node 是两个层面的东西：前者是规范，后者是对前者的实现！在 ES6 之前，Js 是不支持模块化开发的，现代化 Js 却都使用模块化开发方式！

1）说不是。

Node 是实现运行时，它支持模块化运行方式，如果 npm 安装的包运行在 node 上，那它不需要做编译转化! 比如常见的 vue 框架，提供命令行; 或者使用 node 开发的服务器后台程序，都是如此！这样看: npm 安装的包不是经过 webpack 打包而来的！事实上真是这样吗 ??

2) 说是。

目前浏览器不支持 JS 模块化，像这样的代码需要被编译转化，这个功能就被实现到 webpack 里. 实际上，npm 安装包未必只能安装 js 代码，比如 bootstrap; 即使是 js 代码，也未必是给 node 运行的，比如 JQuery, 就是给 browser 准备的那它们就有必要被编译转化，所以也可以说成：npm 安装的包是经过 webpack 打包而来的

按照常识做个推算：

A) 简术下 Linux 操作系统：它由 linus Torvalds 在 1991 年开发出来的 Kernel、初始化子系统 systemd、终端 shell 和互联网其他基础服务程序 (比如 bind) 组成。公布的完整系统分成两大阵营：RedHat 和 Debian, 它们的组成基本一致，区别是包管理器：yum(rpm) 和 apt-get(dpkg)!!! 这种包不论是哪种安装器，也不论是哪种开发语言，都必须满足系统目录使用规范，才能被正确使用

B) 系统上编译安装 Ruby 安装在 /usr/local/ruby 目录下; 这样：我们会得到解释执行器程序，和它自己的包管理工具 gem! 那 gem 安装的软件包将是：使用'ruby'代码完成的“完整小工具或者框架”, Rails、devise 等就是典型代表！
这些包还可以是 DB 驱动、前端包，必须满足 ruby 目录使用规范，才能被正确使用

C) 系统上编译安装 Python 安装在 /usr/local/python 目录下; 这样：我们会得到解释执行器程序，和它自己的包管理工具 pip！那 pip 安装的软件包将是：使用'python'代码完成的“完整小工具或者框架”, Django、ipython 等就是典型代表! 这些包还可以是 DB 驱动，必须满足 python 目录使用规范，才能被正确使用

D) 系统上编译安装 node 安装在 /usr/local/node目录下; 这样：我们会得到解释执行器程序，和它自己的包管理工具 npm! 那 npm 安装的软件包将是：使用'JS'代码完成的“完整小工具或者框架”, Jquery、vue 等就是典型代表! 这些包分为全局和局部，全局包必须满足 node 目录使用规范，才能被正确使用，另外 yarn 是 npm 的替代品，安装的东西是一样的

事实上，gem/pip安装的包既有命令行, 又有框架; 整体上说它们还是跑在虚拟机运行时上; node 似乎不满足这种规范，npm 安装的包有的可以跑在 node 上，比如 vue; 有的可以跑在浏览器上，比如 jQuery

请教的问题是：假如说，有一个请求到达 Rails 系统

路由组件先收到这个请求，并发送到controller#action动作上
这个 controller 可以指定 layout 布局，或者在 action 里使用 render :layout => 指定布局
布局文件默认是指向 app/view/layout/application.html.erb 或者该目录的其他文件
文件里有两条指令 stylesheet_link_tag 和 javascript_pack_tag, 他们的参数都是 application

4_1. stylesheet_link_tag => app/assets/stylesheets/application.css (scss) 

4_2. javascript_pack_tag => app/javascript/packs/application.js (config/webpacker.yml)

application.js 文件里使用 import "bootstrap", 默认是 app/node_modules/bootstrap

1) 如果使用 yarn add xxxx 其他的js库，是不是意味着 import xxxx 就可以找到 ?
2) 如果自己编写的 yyyy.js 放在 app/javascript/packs, 应该写 import yyyy 嘛 ？
3) bootstrap 依赖 jquery，导入了bootstrap是不是不用在单独导入 jquery ？
4) 这个目录 app/javascript/channels 是做什么用的呢 ?

css 文件里使用 @import "bootstrap/dist/css/bootstrap"; 默认是 app/node_modules/bootstrap/dist/css/bootstrap.css

1) 如果使用 yarn add zzzz 其他的css库，是不是代表着 @import "path_zzzz" 必须对应到相应的css文件 ？
2) 这个目录 app/assets/stylesheets 默认情况下会创建针对控制器Controller的css文件, 哪里制定它的呢 ?

官网指南看上去还没整明白，望大神指点迷津，有没有 6 版的中文手册之类的...

rux_9527 (杰瑞)

关于前端的思考和疑惑

在这之前，我想先描述一下我对前端的理解思路：

是也不是？??! 理解关键点是：

按照常识做个推算：