现代JavaScript发展概述

本文回顾了现代JavaScript的发展历程,从早期的HTML、CSS、JS到使用包管理器、静态模块打包器、转译器及任务执行器实现自动化构建,涵盖了前端生态的演变。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

现代JavaScript发展概述

这是一篇观后感,对原文进行了翻译和总结。
概述前端生态的发展史 + 发展过程种遇到的各种问题 + 解决问题所使用的工具。

原文:Modern JavaScript Explained For Dinosaurs

1. 早期通过html、css、js即可创建一个网页

这个阶段需要我们手动的引入js和样式文件。
优点: 简单易懂。
缺点:引用的插件每次版本更新后,都需要手动下载新版本文件。

2. 使用js包管理器( npm )

  npm init

创建 package.json 文件,然后通过 npm install 安装依赖(eg:moment.js ),这样就可以在 node_modules 文件夹中找到 moment.min.js 文件。在index文件中手动引入 moment.min.js。
优点:解决了手动更新版本的问题,可以通过命令行进行更新。
缺点:在 node_modules 文件夹中找到所需插件的位置,然后将路径引入到 index.html 不方便。

3. 使用静态模块打包器(module bundler) webpack:

大多数编程语言都提供了可以将代码从一个文件引入到另一个文件的方法,但是由于一开始JS是被设计为在浏览器上运行,所以为了安全JS被设计为没有权限访问客户端文件系统。所以很长一段时间里需要通过定义全局变量的方式,让JS代码可以在多个文件中使用。以 moment.js 为例子,需要将 moment.min.js 载入html,它定义了一个全局变量 moment,允许 moment.min.js 后加载的文件使用它(不管后面的文件是否需要)。
2009年发起了一个名为 CommonJS 的项目,目的就是建立一个浏览器外的JS生态。CommonJS 很大一部分是模块规范,它允许 JS 像其他编程语言一样,不通过定义全局变量就可以在文件之间引用代码。
CommonJS模块化 最出名的实现就是 node.js。由于 node.js 是用于服务端,所以允许访问计算机的文件系统。使用 node.js modules 就可以不用将路径引入 html 来加载,并且 node.js 知道每个 npm 模块所在地址,所以可以通过 require('moment') 来引入 moment。
但是如果你试图在浏览器上使用上述代码,会报错:require is not defined。这是因为浏览器没有权限访问文件系统。这时就需要 静态模块打包器(module bundler) ,JS静态模块打包器 是在 build step 时(此时可以访问文件系统)创建一个浏览器兼容的文件(不需要访问文件系统)。此时,我们需要 静态模块打包器找到所有的 require 声明,并使用真实的请求文件内容将其进行替换。最终可以得到一个JS包文件(没有require声明)。

4. 为新语言功能转义代码(babel):

转义代码指的是将一种语言的代码转化为另一种相似的语言的代码。这对前端很重要,因为浏览器添加新功能的速度很慢,创建出来的新语言可以将试验性的特性转化为浏览器兼容的语言。
CSS有Sass,Less等。JS之前流行CoffeeScript(2010年发布),现在更多人使用 babel 或者 TS。Babel 不是一种新语言,而是一个转译器,可以将下一个版本的JS特性转换成被浏览器更好兼容的版本(ES5)。TS是一种与下一代JS基本相同的语言,但增加了可选的静态类型。
webpack 使用 babel:https://webpack.js.org/loaders/babel-loader/#root

  npm install @babel/core @babel/preset-env babel-loader --save-dev

使用 exculde 将 node_modules 文件夹里的 .js文件排除

  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }]
  }

这样就可以使用 ES6 新特性了,到这里我们就完成了大部分,还有些优化,比如:代码压缩、代码变更后 webpack 更新等。

5. 使用任务执行器(task runner)(npm script):

我们通过 build step来实现JS模块化,我们需要一个 任务执行器(task runner),来实现 build 的自动化流程。对前端来说,tasks 包括代码压缩、图片优化、代码测试等。
在2013年,Grunt 是最流行的前端任务执行器(task runner),紧接着是 Gulp,两者都依赖于包装了其他命令行工具的插件。现在更多使用 npm包管理器 内置的脚本功能。
我们可以在 package.json 文件中 “scripts”里编辑命令:

"scripts": {
	"build": "webpack --progress --mode=production"
}

命令行输入 npm run build
就会根据 配置文件webpack.config.js 执行 webpack(也可以使用 –config + 配置文件 来更改配置文件),–progress显示百分比–mode=production 压缩代码
我们可以注意到 scripts 中执行 webpack 时,地址没有写全称:./node_modules/.bin/webpack。这是因为 node.js 知道每个 npm包 的地址
我们还可以引入 webpack-dev-server,可以使修改和保存代码后,浏览器自动加载编译后的代码

总结:

这就是现代JS的发展历程,我们从最开始的 HTML 和 JS 到使用 包管理器 来自动下载第三方包、使用 静态模块打包器 生成单个脚本文件、通过 转译器 使用JS新特性、使用 任务执行器(task runner) 实现自动化构建。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值