35 Chapter 14: Using Browserify 36 Parameters 36 Examples 36 Using Browserify with Vanilla Javascript 36 Using Browserify with Coffeescript 36 Chapter 15: Using file filters. 38 Examples 38 Creating info@zzzprojects.com https://riptutorial.com/ 1 Chapter 1: Getting started with gulp Remarks Gulp is a JavaScript build system, node.js-based task runner like Grunt. It allows you to automate common tasks during invocation The sequence method , ensures , synchronous method runs in an asynchronous by default javascript. installing it is simple DO bash $ npm install run-sequence then , declare it in your gulpfile

a.js 规律 1. 找到 js/目录下的所有 .js 文件 2. 压缩这些 js 文件 3. 将压缩后的代码另存在 dist/js/ 目录下 编写 gulp 代码 // 压缩 JavaScript 文件 gulp.task('script', function() { // 1. 找到 gulp.src('js/*.js') // 2. 压缩 gulp 入门指南 - 2 - 本文档使用 看云 构建 安装 Node 和 gulp gulp 是基于 node 实现的，那么我们就需要先安装 node。 Node 是一个基于Chrome JavaScript V8引擎建立的一个平台，可以利用它实现 Web服务，做类似 PHP的事。 打开 https://nodejs.org/ 点击绿色的 INSTALL INSTALL 按钮下载安装 node。 dest('dist/css/')) }) 在命令行输入 gulp minifyss 以压缩 src/css/ 下的所有 .css 文件并复制到 dist/css 目录下 配置 Less 任务 参考配置 JavaScript 任务的方式配置 less 任务 gulp 入门指南 - 31 - 本文档使用 看云 构建 var less = require('gulp-less') gulp.task('watchless'

https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results#q18-javascript-module-bundlers-usage DO YOU USE A JAVASCRIPT MODULE BUNDLER IN YOUR WORKFLOW? ACTIVITY 2019-09 2019-10 2019-11 ISSUES

默认开启了对配置的严格校验 如何从 Webpack 迁移到 Rspack？ ??? Rust is faster than JavaScript • 优先使用内置功能 • SWC > babel-loader，Rspack 使用 SWC 编译 JavaScript 代码 • experiments.css > style-loader + css-loader，Rspack 使用 SWC

SECTION ON “EVALUATE” CURRENT STATE (WEBPACK 3) • WEBPACK ONLY SUPPORT A SINGLE MODULE TYPE: JAVASCRIPT (JS) • EVERYTHING IS COMPILED TO JS • WEBPACK DOESN’T SUPPORT ADDITIONAL OPERATIONS ON SPLIT IN JS INSTEAD OF WASM CHALLENGE 5: I64 • WEBASSEMBLY HAS THIS NICE 64BIT INTEGER DATA TYPE • JAVASCRIPT CAN’T HANDLE IT (CURRENTLY)* • ANY FUNCTION WITH i64 IN SIGNATURE WILL CRASH IN JS (RuntimeError)

• b_unused as w • • 8 ??? ? ? • • STYLES.JS 10BYTES • stylesheet 9 ?? ?? ?? 14kb javascript 1.2kb runtime 20kb webassembly 100kb stylesheet 10 ? ? ? undefined is not a function ❌ •

parcel rollup 为什什么选择 webpack? webpack grunt gulp 定义 Module bundler Task runner Task runner 语⾔言 JavaScript Node.js Node.js 发布时间 2012.3 2012.6 2013.7 GitHub stars 40766 11796 29427 周下载量量 3,385,392 478

两种设置⽅式：5 =< ecmaVersion <= 11 或 2009 =< ecmaVersion <= 2020 开创性的特性：模块联邦 发明者：Zack Jackson 基本解释：使 ⼀个JavaScript 应⽤在运⾏过程中可以动态加载另⼀个应⽤的代码，并⽀持共享依赖（CDN）。不再需要 本地安装 npm 包。 • Remote：被依赖⽅，被 Host 消费的 webpack 构建 • Host：依赖⽅，消费其他

一个最简单的 loader 代码结构 module.exports = function(source) { return source; }; 定义：loader 只是一个导出为函数的 JavaScript 模块 多 Loader 时的执行顺序 多个 Loader 串行执行 顺序从后到前 module.exports = { entry: './src/index.js'

FUTURE” 2008 • STUDIED COMPUTER SCIENCE • JAVA • DISCOVERED GOOGLE WEB TOOLKIT (GWT) • JAVA TO JAVASCRIPT COMPILER • GENERATES BIG JS FILES • BUT ALSO HAD A SOLUTION FOR THIS GWT CODE SPLITTING Button