透过现象看本质: 常见的前端架构风格和案例

除了上述的RxJS，管道模式在前端领域也有很多应用，主要集中在前端工程化领域。例如'老牌'的项目构建工具Gulp, Gulp使用管道化模式来处理各种文件类型，管道中的每一个步骤称为Transpiler(转译器), 它们以 NodeJS 的Stream 作为输入输出。整个过程高效而简单。

不确定是否受到Gulp的影响，现代的Webpack打包工具，也使用同样的模式来实现对文件的处理, 即Loader, Loader 用于对模块的源代码进行转换, 通过Loader的组合，可以实现复杂的文件转译需求.

// webpack.config.jsmodule.exports = { ... module: { rules: [{ test: /.scss$/, use: [{ loader: "style-loader"// 将 JS 字符串生成为 style 节点 }, { loader: "css-loader"// 将 CSS 转化成 CommonJS 模块 }, { loader: "sass-loader"// 将 Sass 编译成 CSS }] }] }};复制代码

// webpack.config.jsmodule.exports = { 
 ... 
 module: { 
 rules: [{ 
 test: /.scss$/, 
 use: [{ 
 loader: "style-loader"// 将 JS 字符串生成为 style 节点 
 }, { 
 loader: "css-loader"// 将 CSS 转化成 CommonJS 模块 
 }, { 
 loader: "sass-loader"// 将 Sass 编译成 CSS 
 }] 
 }] 
 } 
}; 
复制代码 

中间件(Middleware)

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!