一个后端er想进前端娱乐圈

忘是亡心i 2023-10-11 13:12 6阅读 0赞

经过几天的折腾，总算是略微明白前端娱乐圈的一堆工具。

## 模块化 ##

为什么要折腾这些？

因为我想用js的模块化，不想再jquery一把梭。

第一个想到的是typescript，过了一遍文档，把现有项目的部分功能用ts改写后没问题，学习内容包括：

1.  了解Node.js，会用其运行脚本；
2.  了解包管理工具npm，据~说yarn更好，遂采用后者，会用其安装、卸载包；
3.  学习typescript语法，并改写现有项目的几个函数。

随后准备编译，合并进项目master，接下来问题来了，浏览器不能运行。

报错信息为：`exports is not defined`，这个信息让我走上了瞎折腾的道路。

## 规范 ##

得知现代浏览器不支持`exports`关键词，那`exports`又是什么？它是`CommonJs`中的一个语法，我想起ts配置文件中有个编译选项就是`"module": "commonjs"`。

这个`CommonJs`又是什么？它是一种规范，就是希望大家都能按这个标准来，同类规范还有：

1.  AMD (Asynchronous Module Definition)
2.  CMD (Common Module Definition)
3.  ES6 (ECMAScript 6)

![JavaScript模块化.png][JavaScript_.png]

这里引用[《前端模块化详解(完整版)》][Link 1]中的一张图，关于模块化的发展进程和相关介绍，大家可以看看这篇文章，写的很好。

## 转换器 ##

到这里明白了tsc编译出来的代码虽然可以直接用node.js运行，但却不能直接运行于浏览器中，需要一种「转换器」来将编译出来的代码在进行一次转换，经过搜索得知有以下工具：

1.  Browserify
2.  Babel
3.  Rollup

Browserify官方都不更了，能搜到的资料也都是15、16年左右的，Rollup又太新，只有Babel，从版本6发展到版本7，看起来似乎不错，选定这个开始继续转换。

期间又学会了gulp的用法，gulp是一种流程管理工具，其核心是`task`,你可以将一系列重复性的工作写成一个个的task，让其自动化执行，比如：编译→转换代码→压缩混淆等。

大体看了下Babel文档，能使用gulp写task来完成ts代码的编译（注：Babel6是先将ts编译，然后执行转换，共两步，Babel7编译和转换是一步），最终编译出来的代码含有`require`关键词不被支持，此时想起上图中有个require.js，难道引入这个js文件就可以了？答案显然不行，是我太天真。

后得知Babel编译出的ESM (ES Module)代码并不能直接运行与浏览器，也就是说还得转换一步？？？

我滴个天~ ::>\_<::

与ESM同类型的还有个CJS，我也没心情去了解了，在这一步上浪费了太多时间。

想起之前github上那位`求你别更了、学不动了`老哥……

感慨自己幸亏以前没入前端坑。

## 打包工具 ##

还得继续啊，得找出「下一个」转换器啊，于是知道了打包工具：

1.  webpack
2.  parcel

webpack是重量级打包工具，配置繁琐，心想学习成本肯定高，有多高？针对webpack的书都上市了，你说多高？

再看parcel，官网写着0配置，真好，我就喜欢不用配置的，看了下文档，顺利转换出浏览器可用代码，开心坏了我滴天~

问题来了，我不是单页应用，我有多个「入口」啊，难不成要一个个命令行转？心想肯定有个配置文件可以改的，等等……0配置文件？容我凌乱一会~

哭着安装了webpack，发现webpack4也在学习parcel一些默认配置的优点，但是并没有「0配置」。

看着文档写好配置文件，也没那么恐怖。

至此，前端整套流程在脑中逐渐清晰起来。

## 总结 ##

前端er你们辛苦了 : )

[JavaScript_.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zc3Npcy5tZS91c3IvdXBsb2Fkcy8yMDE5LzA4LzM4MjYxMTU3MjMucG5n?x-oss-process=image/format,png
[Link 1]: https://github.com/ljianshu/Blog/issues/48

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关前端和后端优化

1.前端资源优化 1.1 html结构优化保证简洁、清晰的html结构，减少或避免多余的html标签使用HTML5的web语义化标签，结构清晰且利于seo c

以你之姓@/ 2024年02月20日 09:13/ 0 赞/ 58 阅读

相关一个后端er想进前端娱乐圈

经过几天的折腾，总算是略微明白前端娱乐圈的一堆工具。模块化为什么要折腾这些？因为我想用js的模块化，不想再jquery一把梭。第一个想到的是typescri

忘是亡心i/ 2023年10月11日 13:12/ 0 赞/ 7 阅读

相关前端给后端发送数据，后端接收

在具体的前后端分离项目中，我们经常会遇到点击表格中的某一行的按钮，获取这一行的某一项值的需求，前端点击拿到这个值，再传给后端使用例如：在此例中点击同步的按钮，需要获取到表格

╰半橙微兮°/ 2023年10月02日 23:47/ 0 赞/ 23 阅读

相关前端获取后端数据

前端获取后端数据前阵子做个项目，因为涉及到前端代码，奈何前端知识有限，有个问题搞了好久。前端的js里需要一个数组，我后端都封装好了，但是这短短的距离我却不知道怎么拿

逃离我推掉我的手/ 2023年01月13日 09:00/ 0 赞/ 217 阅读

相关这么小声还想做后端？不！我要快速搭建一个简易后端(2020后端学习总结)

> 文章开始让我们大喊一声！开军舰！！ > > 新年快乐前阵子在忙考研虽然也过不了最近没啥事写个总结吧 > 文章代码已放置 github > [https:

梦里梦外;/ 2023年01月04日 10:29/ 0 赞/ 102 阅读

相关盘点前端、后端工具包

1、视频API或者播放器API API地址：[https://h5player.bytedance.com/api/][https_h5player.bytedance.co

Bertha 。/ 2022年11月29日 12:39/ 0 赞/ 184 阅读

相关 mysql前端还是后端_前端和后端哪个发展好点？

前端和后端哪个工资高，哪个发展前景好？事实上，两个都是属于技术研发岗位，都是高薪有前途的职业，不存在说哪个工资更高些，都基本在一万到五万之间，工资的差别主要体现在个人技术上。要

た入场券/ 2022年10月25日 05:50/ 0 赞/ 191 阅读

相关没有后端，前端去哪里找到自己想要的数据接口？

不知道作为前端的你有没有和我一样的困惑，想要学好ajax，想要模仿真实的请求后端数据，但一直苦于没有后端支持，嗯，因为这个问题，我想了好多办法，在网上找各种数据接口，接口是

谁践踏了优雅/ 2022年05月17日 22:36/ 0 赞/ 552 阅读

相关 java后端随意给前端传一个json值

JSONObject json = new JSONObject(); json.put("state", "successful"); Strin

悠悠/ 2021年12月04日 10:02/ 0 赞/ 376 阅读

相关后端(MVC)、前端(MVVM)

MVC: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

╰半橙微兮°/ 2021年07月24日 23:11/ 0 赞/ 522 阅读