您的位置:乐百家在线 > 乐百家官方网站 > 能源预加载,技能栈开垦web应用

能源预加载,技能栈开垦web应用

2019-11-05 11:02

预渲染 Prerender

那是贰个核火器,因为 prerender 能够优先加载文档的兼具能源:

<link rel="prerender" href=";

1
<link rel="prerender" href="http://example.com">

Steve Souders 在他的大器晚成篇小说中写到:

那好像于在叁个掩蔽的 tab 页中开垦了有些链接 – 将下载全数能源、创设 DOM 结构、完结页面布局、应用 CSS 样式和履行 JavaScript 脚本等。当顾客真正访谈该链接时,隐讳的页面就切换为可知,使页面看起来就是须臾间加载成功相近。Google搜索在其即时追寻页面中早已接纳该手艺多年了,微软也扬言就要 IE1第11中学帮忙该个性。

必要小心的是永不滥用该性情,当您通晓顾客一定会点击有些链接时才得以开展预渲染,不然浏览器将无需付费地下载全体预渲染供给的财富。

越多相关斟酌:

装有预加载本领都设有八个秘密的风险:对能源预测错误,而预加载的付出(抢占 CPU 能源,消耗能瓶,浪费带宽等卡塔 尔(英语:State of Qatar)是慷慨激昂的,所以必需留神行事。纵然很难显著客户下一步将走访哪些能源,但高可相信的景象确实存在:

  • 假定客商达成三个蕴含分明结果的找寻,那么结果页面很可能会被加载
  • 若果客商走入到登录页面,那么登录成功的页面很恐怕会被加载
  • 假诺客商阅读三个多页的文章或访问一个分页的结果集,那么下大器晚成页很或者会被加载

最后,使用 Page Visibility API 可避防卫页面真正可以看到前被实践。

聊聊Clip-Path

2016/09/19 · 根底技能 · clip-path

正文作者: 伯乐在线 - Damonare 。未经小编许可,防止转发!
应接加入伯乐在线 专辑小编。

注释

  1. CSS 的 specificity 性格或称卓绝性,它是衡量叁个衡量CSS值优先级的二个正式,既然作为标准,就颇有黄金时代套相关的推断规定及计算方法,specificity用贰个三位的数字串(CSS2是几位)来代表,更像四个等第,值从左到右,左面包车型客车最大,一级大于超级,数位之间未有进制,品级之间不得抢先。
  2. 可参考 

    1 赞 2 收藏 评论

乐百家官方网站 1

用“MVC”组织代码

用MVC的布局协会代码当然是黄金法则了。express能够用模板引擎来渲染view层,路由体制来协会controller层,然则express并未显著规定MVC结构应该怎样写,而是把自由选用交给你,本身来社团MVC结构。当然你也得以团体别的情势,譬如像Java中的“n层架构”。

在本项目中,大家就以文件夹的花样来归纳组织一下。因为大家利用了前面一个模板,所将来端的view层就海市蜃楼了,独有controller和model。看一下档案的次序的目录:

乐百家官方网站 2

在protect下有多少个文本夹controllers和models分别放C和M。大家路由中应用的questionController对象就定义在questionController.js中,来看一下用以保存试题的save方法是何等定义的:

JavaScript

var Question = require('../models/question'); module.exports = { //增添试题 save: function(req, res){ var data = req.body.question; Question.save(data, function(err, data){ if(err){ res.send({success: false, error: err}); } else{ res.send({success: true, data: data}); } }); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Question = require('../models/question');
module.exports = {
     //添加试题
     save: function(req, res){
          var data = req.body.question;
          Question.save(data, function(err, data){
               if(err){
          res.send({success: false, error: err});
     }
     else{
          res.send({success: true, data: data});
     }
          });
     }
}

questionController作为三个模块,使用正式的commonjs语法,大家定义了save方法,通过req.body.question,能够获得前台传过来的数额。在这里个模块中,大家require了放在model层的Question模型,对的,它正是用来操作数据库的,调用Question.save方法,那份数据就存入了数据库,然后在回调函数中,我们用res.send将json数据重返给前端。

概念好questionController后,大家就足以在server.js中把它给require进去了,然后就有了前边我们在路由中动用的

JavaScript

apiRouter.post('/submitQuestion', questionController.save);

1
apiRouter.post('/submitQuestion', questionController.save);

方方面面工艺流程就勾搭起来了。

models文件夹中放的正是模型了,用来管理与数据库的炫人眼目和相互影响,这里运用了mongoose作为数据库的操作工具,model层怎么样来编排,本篇就不做牵线了,在下风流倜傥篇中大家再详尽讲授。

最后再声称一下,本篇小说的代码是基于贰个练习项目QuestionMaker,为了更加好精晓小说中的陈述,请查看项指标源码:

1 赞 2 收藏 评论

乐百家官方网站 3

如何 hack Node.js 模块?

2016/10/28 · JavaScript · NodeJS

原稿出处: Taobao前端团队(FED卡塔 尔(英语:State of Qatar)- 宣予   

乐百家官方网站 4

总结

前瞻客商下一步将访谈哪些能源是艰苦的,须要展开多量的测验,不过那带来的性子升高是显然的。即使大家甘愿尝试这个预获取手艺,一定会刚烈进级客商的体会。

打赏支持本身写出更加多好文章,多谢!

任选意气风发种支付办法

乐百家官方网站 5 乐百家官方网站 6

能源预加载,技能栈开垦web应用。 1 赞 2 收藏 评论

多文件

不菲 web 开垦貌似都和将职责分割为可治本的块或「组件」相关。对于每一个别离的 JavaScript 作用块、或 HTML 局地,作者得以做一个专程文件,并把相关文件组织到文件夹里,以 javascript、html 或 controller、templates 命名。你怎么办都行。那样,你就会轻易查看文件系统,只关切包含有你登时想要编辑的代码文件就可以。

这种艺术不适用于 CSS。JavaScript 函数能够献身它们被调用地方的上下,HTML 模块能够在其他地点插入,只要您以为它们相符当下文书档案流。其他方面,CSS 是规行矩步时间顺序产生的。它和您评释样式的依次,有着相当的大关系。由于该语言的接轨和 specificity注1,你应该从经常样式(譬如对 body 设置 font-family卡塔 尔(阿拉伯语:قطر‎以前,并过度到越多具体的定义。

CSS 是一个不变的、以分裂为底蕴的言语,未有轻便的格局来连贯地球表面示三个文书列表(平时依据字母逐大器晚成组织卡塔尔国。它给了你贰个纪念,每个CSS 文件都是自治的,事实上却不是。

- buttons.css - reset.css

1
2
- buttons.css
- reset.css

进而你有两种采取:当您准备把贰个方钉子打入圆孔时,你能够对「specificity 不该成为 CSS 的大器晚成都部队分」持推却、抱怨的神态,也许,你用三个具有大好注释的文本,它总来讲之地球表面示了继续过来层叠的弧度。specificity 不应有成为三个主题材料,因为超越四分之一特定的接收器应该是您聊起底才编写的。

总结你不应有把 CSS 文件分割为单独文件,就像是不该把一块玻璃丢在水泥地板上等同。

乐百家官方网站 ,运作起基于express的web服务器

express是一个web应用开辟框架,它依照nodejs,扩张了好多web开发所需的成效,使得大家能够很有利的拜谒和操作request和response。请小心它和nginx恐怕tomcat并非五个概念,它是七个开支框架,并非服务器。

运维起基于express的web服务器是特别简单的,因为express都绑你封装好了。首先须求用npm安装好express,然后在类型根目录下新建二个server.js文件,内容如下:

JavaScript

var express = require('express'); var app = express(); app.listen(3000); var _rootDir = __dirname; var protectDir = _rootDir + '/protect/'; app.use(express.static(_rootDir)); //注册路由 app.get('/', function(req, res){ res.sendFile(_rootDir+'/src/index.html'); }); app.use(function(req, res, next) { res.status(404).sendFile(_rootDir+'/src/404.html'); }); app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send('500 Error'); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var express = require('express');
var app = express();
app.listen(3000);
 
var _rootDir = __dirname;
var protectDir = _rootDir + '/protect/';
 
app.use(express.static(_rootDir));
 
//注册路由
app.get('/', function(req, res){
    res.sendFile(_rootDir+'/src/index.html');
});
 
app.use(function(req, res, next) {
     res.status(404).sendFile(_rootDir+'/src/404.html');
});
app.use(function(err, req, res, next) {
     console.error(err.stack);
     res.status(500).send('500 Error');
});

上述代码完结了那多少个功效,首先创建了http服务器,监听在3000端口。

然后app.use(express.static(_rootDir));那生龙活虎行是选取了静态文件服务的中间件,那样我们项目下的js、css以至图片等静态文件就都能够访问到了。

接下去是挂号路由,此处只极其一个路由准绳,那便是”/”(网址的根目录卡塔 尔(阿拉伯语:قطر‎,当相配到此路由后把首页文件index.html直接用res.sendFile方法给发送到浏览器端。那样浏览器用

而是在本项目中,大家用的是angular的前端模板,所以往端就无需模板了,未有举办布局。我们的路由机制也是完全使用的ng的前端路由,所以在express中只布置一条就够了。

在结尾还应该有两块代码,分别是404和500错误的破获。你恐怕会猜疑为何是那样写吗?从上到下排下来就会分别捕获404和500了啊?其实那便是express的中间件机制,在那编写制定下,对顾客端乞请的拍卖疑似一个流程,把具有中间件串联起来,只要某些中间件把央求再次回到了,就长逝施行,不然就从上到下一向管理此恳请。

下边代码的流程便是,先按路由准则来合作路线,倘若路由相当不到,则认为是发出404。500的不当请在意三个细节,在回调函数的参数中,第三个会传来err,正是错误对象,以此来标识是三个500错误。

窜改输入(prompt)

情景:使用 DEF 创制模块 or 宣布模块时

由来:想风姿浪漫键完毕批量开立 or 批量宣告,不想手动输入。

斩尽杀绝进度:以创制模块为例

  • 率先找到 DEF 的入口文件,即一个 bin 目录下的不二秘诀,能够通过这么些进口文件不断追溯下去,开掘创制模块的 generator 用的是 yeoman-generator 的章程。对 prompt 的措施开展代理,能够将该底工库提前 require,修正掉其 prompt 的形式就可以。
  • 屈居示例代码(示例只窜改 def add 模块的制造项目,其他输入的歪曲方法相近卡塔尔国:

JavaScript

#!/usr/bin/env node 'use strict'; require('shelljs/global'); const path = require('path'); const HOME = process.env.HOME; const yeomanRouter = require(path.join(HOME, '.def/def_modules/.generators/@ali/generator-abs-router/node_modules/@ali/generator-abs-router/node_modules/yeoman-generator')); yeomanRouter.generators.Base.prototype.prompt = function(list, callback) { let item = list[0]; let prop = {}; prop[item.name] = 'kissy-pc'; // 让模块类型输入自动为pc callback(prop); }; //require real def path const defPath = which('def').stdout; require(defPath);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#!/usr/bin/env node
 
'use strict';
 
require('shelljs/global');
const path = require('path');
const HOME = process.env.HOME;
 
const yeomanRouter = require(path.join(HOME, '.def/def_modules/.generators/@ali/generator-abs-router/node_modules/@ali/generator-abs-router/node_modules/yeoman-generator'));
 
yeomanRouter.generators.Base.prototype.prompt = function(list, callback) {
  let item = list[0];
  let prop = {};
  prop[item.name] = 'kissy-pc'; // 让模块类型输入自动为pc
  callback(prop);
};
 
//require real def path
const defPath = which('def').stdout;
require(defPath);

Preload

preload 是一个新专门的职业,与 prefetch 差异(恐怕被忽略卡塔 尔(英语:State of Qatar)的是,浏览器一定会预加载该财富:

<link rel="preload" href="image.png">

1
<link rel="preload" href="image.png">

就算如此该标准尚未被有着浏览器宽容,但其背后的思谋依旧特别风趣的。

前言

图表是二个网站不可缺乏的因素,而展现出五光十色的图纸效果在无数处境下不仅是设计员的办事,通过代码来修饰图片也是七个前端工程师必备的本领。因为包容性的标题,实际项目中恐怕用的少之甚少,包蕴博主本身也只是用过四次私分,超级多处境下都付出设计员去做了。但作为一个红客怎能满意于此呢,必需深切讨论!

写 CSS 时要制止的几个地点

2015/11/01 · CSS · 命名

初稿出处: heydonworks   译文出处:腊八粥   

宣称:你能够不允许我在本文所写的黄金时代对思想,没分外,小编不是要表示你、代表你的店堂或发现,因而请不要以为不安。继续维持你的见地就可以。向那多少个理解演说方法和辩证法的、绝大大多人赔礼道歉,因为本证明不适用于她们。

知道中间件

express的基本是中间件机制,通过运用各个中间件,能够贯彻灵活的构造建设大家所需的机能。中间件是在管道中奉行的,所谓管道正是像流水生产线同样,每达到三个加工区,相应的中间件就能够拍卖request和response对象,管理完后再送往下叁个加工区。倘使某些加工区把必要终结了,比方调用send方法重回给了顾客端,那么管理就止住了。大多数情景下,都有现有的中间件供大家利用,比方用body-parser深入解析央浼实体,用路由(路由也是黄金年代种中间件卡塔 尔(英语:State of Qatar)来不易的派发央求。

举个例子我们在server.js中增添如下的代码:

JavaScript

app.use(function(req, res, next){ console.log('中间件1'); next(); }); app.use(function(req, res, next){ console.log('中间件2'); });

1
2
3
4
5
6
7
8
app.use(function(req, res, next){
     console.log('中间件1');
     next();
});
 
app.use(function(req, res, next){
     console.log('中间件2');
});

小编们增加了两个中间件,诉求过来以往会先被第三个捕获,然后开展管理,输出“中间件1”。前边随着试行了next()方法,就能够步入下叁在那之中间件。几此中间件施行后唯有两种选择,要么用next指向下叁当中间件,要么将诉求重临。假诺什么都不做,须要将会被挂起,约等于说浏览器端将得不到再次回到,一向处于pendding状态。举例地点的上游件2,将会促成央求挂起,这是理所应当杜绝的。

修改 require

这种方法是一贯去代理 require ,是最妥当的秘技,不过侵入性相对来讲比较强。Node.js 文件中的 require 其实是在 Module 的原型方法上,即 Module.prototype.require。后边会详细说,先轻巧说下操作:

JavaScript

const Module = require('module'); const _require = Module.prototype.require; Module.prototype.require = function(...args){ let res = _require.apply(this, args); if(args[0] === 'a') { // 只更正a模块内容 injectSomething(); } return res; }

1
2
3
4
5
6
7
8
9
const Module = require('module');
const _require = Module.prototype.require;
Module.prototype.require = function(...args){
    let res = _require.apply(this, args);
    if(args[0] === 'a') { // 只修改a模块内容
        injectSomething();
    }
    return res;
}

症结:对全部 Node.js 进度的 require 操作都有所侵入性。

深入阅读

  • Slides from a talk by Ilya Grigorik called Preconnect, prerender, prefetch
  • MDN link prefetching FAQ
  • W3C preload spec
  • Harry Roberts on DNS prefetching
  • HTML5 prefetch
  • Preload hints for webfonts

原文:Prefetching, preloading, prebrowsing

1 赞 5 收藏 评论

乐百家官方网站 7

Flilter

filter有十种特效来管理图片,博主只放三种特效的样例给大家看一下:

肖像反色效果:

乐百家官方网站 8

肖像紫铜色效果:

乐百家官方网站 9

肖像投影效果:

乐百家官方网站 10

十种神效源码:

-webkit-filter:opacity(.6);//折射率 filter:opacity(.6); -webkit-filter:blur(10px);//照片模糊 filter:blur(10px); -webkit-filter:invert(1); filter:invert(1); -webkit-filter:saturate(3);//照片饱和度 filter:saturate(3); -webkit-filter:grayscale(1);//照片灰度 filter:grayscale(1); -webkit-filter:sepia(1);//照片柠檬黄 filter:sepia(1); -webkit-filter:hue-rotate(90deg);//色相旋转 filter:hue-rotate(90deg); -webkit-filter:brightness(.5);//亮度 filter:brightness(.5); -webkit-filter:contrast(2);//比较度 filter:contrast(2); -webkit-filter:drop-shadow(10px 10px 10px #ccc);//阴影 filter:drop-shadow(10px 10px 10px #ccc);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
-webkit-filter:opacity(.6);//透明度
filter:opacity(.6);
-webkit-filter:blur(10px);//照片模糊
filter:blur(10px);
-webkit-filter:invert(1);
filter:invert(1);
-webkit-filter:saturate(3);//照片饱和度
filter:saturate(3);
-webkit-filter:grayscale(1);//照片灰度
filter:grayscale(1);
-webkit-filter:sepia(1);//照片褐色
filter:sepia(1);
-webkit-filter:hue-rotate(90deg);//色相旋转
filter:hue-rotate(90deg);
-webkit-filter:brightness(.5);//亮度
filter:brightness(.5);
-webkit-filter:contrast(2);//对比度
filter:contrast(2);
-webkit-filter:drop-shadow(10px 10px 10px #ccc);//阴影
filter:drop-shadow(10px 10px 10px #ccc);

但实在这里性情情宽容性相当的低:

乐百家官方网站 11

利落博主发布公文日期,Filter的宽容性如上海教室,我们能够见见IE是一心不扶助的,Edge也是一些扶助。那只怕也是Filter没办法用在类型中的原因之一了。感兴趣的读者能够Copy博主代码本地质衡量试一下,或是参照MDN|Filter询问。博主不在那做过多的表达了。

像素单位

回溯到 IE6 的一代,大家应诉诫用 em 单位安装字体大小。较新的浏览器带有缩放功用,能够更易于地按百分比扩大页面尺寸,可是在 IE6,你一定要扩张字体大小。由于用像素安装的文件谢绝被加大,我们会排斥非常多低版本客户。

IE6 不再是四个主题材料了,但是超级多操作系统和浏览器的顾客还是设置单独于缩放功用的字体大小。那应当是她们的喜好,大家理应包容。

说归说,我以至未有策画完结这一指标。笔者只想向您自私的一面发出呼吁:在响应式设计里应用像一贯管理大小,相对是鲁钝非常的所作所为。分开成分之间的尺寸,其相对性的缺点和失误意味着你要必须要为每种独立的断点,单独考虑每一个设置。事实上,使用像素时,你依旧必须要管理字体大小和单身的、隔开成分的 margin。你本不想这么做的。

举个例证:

CSS

@media (min-width: 400px) { h1 { font-size: 22px; margin-top: 33px; } }

1
2
3
4
5
6
@media (min-width: 400px) {
  h1 {
    font-size: 22px;
    margin-top: 33px;
  }
}

大器晚成旦运用相对单位,作者该怎么做吗?小编不情愿的。事实上,笔者不要在自己的传播媒介询问里针对别的单独成分设置字体大小和 margin。小编只想让浏览器或客商根据根成分(卡塔 尔(阿拉伯语:قطر‎来决定字体大小,并用 em 或 rem 来安装本人的有着其余规格。

CSS

h1, h2 { margin-top: 1.5rem; } h1 { font-size: 2.5em; } h2 { font-size: 2em; } /* all your other element styles */

1
2
3
4
h1, h2 { margin-top: 1.5rem; }
h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
/* all your other element styles */

下一场,当本身想在 min-width 断点下放大比例时,小编只必要基于别的成分的比重,调度根的字体大小。小编利用比例,因为那关系到客户喜好,假使设置为:

CSS

@media (min-width: 400px) { html { font-size: 120%; } }

1
2
3
4
5
@media (min-width: 400px) {
  html {
    font-size: 120%;
  }
}

您的响应式设计的 十分之九计谋都在那了。而且,你还能够在富有同级的流元素之间设置通用的 margin,举例动用 Lobotomized Owls注2 的接纳器:

CSS

body * + * { margin-top: 1.5rem; }

1
2
3
body * + * {
  margin-top: 1.5rem;
}

总之拥抱相对性,收获成果。

路由设计

运转起了服务器,领会了中间件编制程序方式,接下去我们就该为前端提供api了。举例前端post一个伸手到/api/submitQuestion来交付生机勃勃份数据,大家该怎样接受伏乞并做出管理啊,那便是路由的设计了。

给app.use的首先个参数字传送入路线能够合作到对应的央浼,举例:

JavaScript

app.use('/api/submitQuestion', function(){})

1
app.use('/api/submitQuestion', function(){})

这么就足以捕获到刚刚的付出试题的呼吁,在第1个参数中得以开展对应的拍卖,比方把数量插入到数据库。

可是,要注意了,express路由的不易利用姿势并非这么的。app.use是用来同盟中间件的门路的,实际不是倡议的门道。因为路由也是风流洒脱种中间件,所以这么的用法也是能够做到成效的,不过大家依然应该遵照法定正式的写法来写。

正式的写法是怎么着样子吗?代码如下:

JavaScript

var apiRouter = express.Router(); apiRouter.post('/submitQuestion', questionController.save); app.use('/api', apiRouter);

1
2
3
var apiRouter = express.Router();
apiRouter.post('/submitQuestion', questionController.save);
app.use('/api', apiRouter);

咱俩选拔的是express.Router那些指标,它同样有use、post、get等办法,用来合作央求路线。然后我们再利用app.use把apiRouter作为第2个参数字传送进去。

要留意的是apiRouter.post和app.use的首先个参数。app.use相称的是倡议的“根路线”,那样能够把伏乞分为不相同的体系,比如具备的异步接口我们都叫api,那么那类央求大家就都应当挂在“/api”下。依照那样的法则,大家所有项目标路由准绳如下:

JavaScript

//注册路由 app.get('/', function(req, res){ res.sendFile(_rootDir+'/src/index.html'); }); var apiRouter = express.Router(); apiRouter.post('/getQuestion', questionController.getQuestion); apiRouter.post('/getQuestions', questionController.getQuestions); apiRouter.post('/submitQuestion', questionController.save); apiRouter.post('/updateQuestion', questionController.update); apiRouter.post('/removeQuestion', questionController.remove); apiRouter.post('/getPapers', paperController.getPapers); apiRouter.post('/getPaper', paperController.getPaper); apiRouter.post('/getPaperQuestions', paperController.getPaperQuestions); apiRouter.post('/submitPaper', paperController.save); apiRouter.post('/updatePaper', paperController.update); apiRouter.post('/removePaper', paperController.remove); app.use('/api', apiRouter);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//注册路由
app.get('/', function(req, res){
    res.sendFile(_rootDir+'/src/index.html');
});
 
var apiRouter = express.Router();
apiRouter.post('/getQuestion', questionController.getQuestion);
apiRouter.post('/getQuestions', questionController.getQuestions);
apiRouter.post('/submitQuestion', questionController.save);
apiRouter.post('/updateQuestion', questionController.update);
apiRouter.post('/removeQuestion', questionController.remove);
apiRouter.post('/getPapers', paperController.getPapers);
apiRouter.post('/getPaper', paperController.getPaper);
apiRouter.post('/getPaperQuestions', paperController.getPaperQuestions);
apiRouter.post('/submitPaper', paperController.save);
apiRouter.post('/updatePaper', paperController.update);
apiRouter.post('/removePaper', paperController.remove);
 
app.use('/api', apiRouter);

在router的第叁个参数中,大家传入了questionController.save那样的不二法门,那是怎样事物吧?怎么有一些MVC的含意呢?对的,大家已经能够包容到路由了,那服务端的事情逻辑以至数据库访谈等该如何协会代码呢?

点窜构建流程(webpackconfig卡塔尔国

情景:多少个Tmall的前端组件,供给在行使def本地调节和测验时提前转移一个文件内容。(Tmall组件的创设会依照组件类型统风度翩翩营造器,并非每一种组件单独去安插卡塔 尔(阿拉伯语:قطر‎

由来:平常的话,这种状态能够接收注释代码大法,本地调试时展开注释,公布前干掉。但诸如此比造成代码非常不美观,也易于引起误操作。不要紧在地点调节和测验的 reflect 进度中动态调换掉就好了。

清除进程:

  • 追溯 def dev 调用链路,找到最后reflect的文本, 在这里个创设器 @ali/builder-cake-kpm 项目里。所接收的webpack的布置项在 @ali/cake-webpack-config 下。
  • 现行反革命便是往 webpack 配置项里动态注入一个 webpack loader 的经过了,作者索要的 loader 是三个preLoader,代码极度轻松,笔者把它位于工作类其余公文里:

JavaScript

module.exports = function(content) { return content.replace('require('./plugin')', "require('./localPlugin')"); };

1
2
3
module.exports = function(content) {
    return content.replace('require('./plugin')', "require('./localPlugin')");
};
  • @ali/cake-webpack-config 暴光的是个函数而非对象,所以必须从 require 出手了,最终附上案例的代办进度:

JavaScript

#!/usr/bin/env node 'use strict'; require('shelljs/global'); const path = require('path'); const HOME = process.env.HOME; const CWD = process.cwd(); const cakeWcPath = path.join(HOME, '.def/def_modules/.builders/@ali/builder-cake-kpm/node_modules/@ali/builder-cake-kpm/node_modules/@ali/cake-webpack-config'); const preLoaderPath = path.join(CWD, 'debug/plugin_compile.js'); // 注入的loader路径 const cakeWebpackConfig = require(cakeWcPath); const requireId = require.resolve(cakeWcPath); require.cache[requireId].exports = (options) => { if (options.callback) { let oldCb = options.callback; options.callback = function(err, obj) { obj.module.preLoaders = [{ 'test': /index.js$/, 'loader': preLoaderPath }]; oldCb(err, obj); } } cakeWebpackConfig(options); } //require real def path const defPath = which('def').stdout; require(defPath);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#!/usr/bin/env node
'use strict';
 
require('shelljs/global');
const path = require('path');
const HOME = process.env.HOME;
const CWD = process.cwd();
 
const cakeWcPath = path.join(HOME, '.def/def_modules/.builders/@ali/builder-cake-kpm/node_modules/@ali/builder-cake-kpm/node_modules/@ali/cake-webpack-config');
const preLoaderPath = path.join(CWD, 'debug/plugin_compile.js'); // 注入的loader路径
const cakeWebpackConfig = require(cakeWcPath);
const requireId = require.resolve(cakeWcPath);
require.cache[requireId].exports = (options) => {
  if (options.callback) {
    let oldCb = options.callback;
    options.callback = function(err, obj) {
      obj.module.preLoaders = [{
        'test': /index.js$/,
        'loader': preLoaderPath
      }];
      oldCb(err, obj);
    }
  }
  cakeWebpackConfig(options);
}
 
//require real def path
const defPath = which('def').stdout;
require(defPath);

本文由乐百家在线发布于乐百家官方网站,转载请注明出处:能源预加载,技能栈开垦web应用

关键词: