-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
3425 lines (3194 loc) · 441 KB
/
search.xml
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>charles使用</title>
<url>/archives/36932.html</url>
<content><![CDATA[<h2 id="下载-charles-工具"><a href="#下载-charles-工具" class="headerlink" title="下载 charles 工具"></a>下载 charles 工具</h2><p>charles 破解版 链接:<a href="https://pan.baidu.com/s/1ps9VZC495UQKLjxPrsSU7w" target="_blank" rel="noopener">https://pan.baidu.com/s/1ps9VZC495UQKLjxPrsSU7w</a> 密码:uqfo</p>
<a id="more"></a>
<h2 id="电脑安装证书"><a href="#电脑安装证书" class="headerlink" title="电脑安装证书"></a>电脑安装证书</h2><pre><code>Help => SSL Proxying => Install Charles Root Certificate
</code></pre><p>之后会弹出钥匙串，如果不弹出，请自行打开钥匙串.<br>系统默认是不信任 Charles 的证书的，此时对证书右键，在弹出的下拉菜单中选择『显示简介』，点击使用此证书时，把使用系统默认改为始终信任</p>
<h2 id="手机设备安装证书"><a href="#手机设备安装证书" class="headerlink" title="手机设备安装证书"></a>手机设备安装证书</h2><pre><code>Help => SSL Proxying => Install Charles Root Certificate On a Mobile Device
</code></pre><p>进入手机设置界面<br>设置服务器代理<br>ip 为你本机的 ip，端口 8888<br>然后打开手机的浏览器，输入<br>charlesproxy.com/getssl<br>安装证书</p>
<h2 id="使用-SSL-代理"><a href="#使用-SSL-代理" class="headerlink" title="使用 SSL 代理"></a>使用 SSL 代理</h2><p>右击链接 => Enable SSL Proxying</p>
<h2 id="操作之后依旧无法抓取-https-包，显示-unknown？"><a href="#操作之后依旧无法抓取-https-包，显示-unknown？" class="headerlink" title="操作之后依旧无法抓取 https 包，显示 unknown？"></a>操作之后依旧无法抓取 https 包，显示 unknown？</h2><p>设置 => 关于本机 => 证书信任设置 => 勾选「针对根证书启用完全信任」</p>
]]></content>
<categories>
<category>前端调试工具</category>
</categories>
<tags>
<tag>debug</tag>
</tags>
</entry>
<entry>
<title>git代码提交规范</title>
<url>/archives/10104.html</url>
<content><![CDATA[<p>git 的提交格式化有很多好处，本文整理一套自己用的提交信息格式。</p>
<h2 id="格式"><a href="#格式" class="headerlink" title="格式"></a>格式</h2><p>提交信息包括三个部分：<code>header</code>，<code>body </code>和 <code>footer</code>。</p>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span>
</code></pre>
<p>其中，header 是必需的，body 和 footer 可以省略。</p>
<h2 id="header"><a href="#header" class="headerlink" title="header"></a>header</h2><p>Header 部分只有一行，包括俩个字段：<code>type</code>（必需）和 <code>subject</code>（必需）。</p>
<pre class=" language-js"><code class="language-js"><span class="token operator"><</span>type<span class="token operator">></span><span class="token punctuation">:</span> <span class="token operator"><</span>subject<span class="token operator">></span>
</code></pre>
<h3 id="type"><a href="#type" class="headerlink" title="type"></a>type</h3><p>type 用于说明 commit 的类别，可以使用如下类别：</p>
<ul>
<li>feat：新功能（feature）</li>
<li>fix：修补 bug</li>
<li>doc：文档（documentation）</li>
<li>style： 格式（不影响代码运行的变动）</li>
<li>refactor：重构（即不是新增功能，也不是修改 bug 的代码变动）</li>
<li>test：增加测试</li>
<li>chore：构建过程或辅助工具的变动</li>
</ul>
<h3 id="subject"><a href="#subject" class="headerlink" title="subject"></a>subject</h3><p>subject 是 commit 目的的简短描述。</p>
<ol>
<li>以动词开头，使用第一人称现在时，比如 change，而不是 changed 或 changes</li>
<li>第一个字母小写</li>
<li>结尾不加句号（。）</li>
</ol>
<h2 id="body"><a href="#body" class="headerlink" title="body"></a>body</h2><p>Body 部分是对本次 commit 的详细描述，可以分成多行。<br>注意：应该说明代码变动的动机，以及与以前行为的对比。</p>
<h2 id="footer"><a href="#footer" class="headerlink" title="footer"></a>footer</h2><p>Footer 部分只用于两种情况：</p>
<ul>
<li>关联 Issue</li>
<li>关闭 Issue</li>
</ul>
<h3 id="关联-Issue"><a href="#关联-Issue" class="headerlink" title="关联 Issue"></a>关联 Issue</h3><p>本次提交如果和某个 issue 有关系则需要写上这个，格式如下：</p>
<pre class=" language-js"><code class="language-js">Issue #<span class="token number">1</span><span class="token punctuation">,</span> #<span class="token number">2</span><span class="token punctuation">,</span> #<span class="token number">3</span>
</code></pre>
<h3 id="关闭-Issue"><a href="#关闭-Issue" class="headerlink" title="关闭 Issue"></a>关闭 Issue</h3><p>如果当前提交信息解决了某个 issue，那么可以在 Footer 部分关闭这个 issue，关闭的格式如下：</p>
<pre class=" language-js"><code class="language-js">Close #<span class="token number">1</span><span class="token punctuation">,</span> #<span class="token number">2</span><span class="token punctuation">,</span> #<span class="token number">3</span>
</code></pre>
<h2 id="使用-commitizen-来执行规范"><a href="#使用-commitizen-来执行规范" class="headerlink" title="使用 commitizen 来执行规范"></a>使用 commitizen 来执行规范</h2><ol>
<li>全局安装:</li>
</ol>
<pre class=" language-js"><code class="language-js">sudo npm install <span class="token operator">-</span>g commitizen
</code></pre>
<ol start="2">
<li>进入目录执行:<br>commitizen init cz-conventional-changelog –save –save-exact</li>
</ol>
<p>配好后，之后用到 <code>git commit</code> 命令时，改为使用 <code>git cz</code>。就会出现选项，用来生成符合格式的 Commit message。<br><img src="/archives/10104.htm/pic.jpg" alt=""></p>
<h2 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h2><pre><code>feat: 添加了分享功能
给每篇博文添加了分享功能
- 添加分享到微博功能
- 添加分享到微信功能
- 添加分享到朋友圈功能
Issue #1, #2
Close #1
</code></pre><h3 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h3><p><a href="http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html" target="_blank" rel="noopener">Commit message 和 Change log 编写指南</a></p>
]]></content>
<categories>
<category>笔记</category>
</categories>
<tags>
<tag>git</tag>
</tags>
</entry>
<entry>
<title>hexo搭建</title>
<url>/archives/33176.html</url>
<content><![CDATA[<h2 id="Hexo安装"><a href="#Hexo安装" class="headerlink" title="Hexo安装"></a>Hexo安装</h2><p>电脑安装好node和git，终端执行命令:</p>
<pre><code>sudo npm install -g hexo
</code></pre><p>接着在任意位置创建一个文件夹，如Blog，cd到该路径下执行以下命令</p>
<pre><code>hexo init
</code></pre><a id="more"></a>
<p>接下来是安装依赖包</p>
<pre><code>npm install
</code></pre><p>执行以下命令</p>
<pre><code>hexo s
</code></pre><p>在浏览器输入<a href="http://localhost:4000/" target="_blank" rel="noopener">http://localhost:4000/</a> 就可以进行查看了。</p>
<h2 id="部署到gitHub"><a href="#部署到gitHub" class="headerlink" title="部署到gitHub"></a>部署到gitHub</h2><p>创建Github账号并新建项目<br>项目名称为用户名.github.io的固定写</p>
<p>编辑自己创建的本地博客文件夹中的_config.yml中的deploy</p>
<pre><code>deploy:
type: git
repo: [email protected]:username/username.github.io.git (我自己的[email protected]:Anne-Tao/Anne-Tao.github.io)
branch: master
</code></pre><p>为了能够使Hexo部署到GitHub上，需要安装一个插件</p>
<pre><code>npm install hexo-deployer-git --save
</code></pre><p>修改完成之后保存退出，然后输入以下命令</p>
<pre><code>hexo clean
hexo g
hexo d
</code></pre><h2 id="配置主题"><a href="#配置主题" class="headerlink" title="配置主题"></a>配置主题</h2><p>本站选的是<a href="https://github.com/iissnan/hexo-theme-next" target="_blank" rel="noopener">hexo-theme-next</a><br>在根目录下执行如下命令</p>
<pre><code> git clone https://github.com/iissnan/hexo-theme-next themes/next
</code></pre><p>将根目录下_config.yml里theme的名称landscape修改为next</p>
<h2 id="next主题优化"><a href="#next主题优化" class="headerlink" title="next主题优化"></a>next主题优化</h2><p>本站参考别人分享的<a href="https://segmentfault.com/a/1190000009544924" target="_blank" rel="noopener">hexo的next主题个性化配置教程</a>,写的非常好，省的自己折腾了</p>
<h2 id="绑定个人域名"><a href="#绑定个人域名" class="headerlink" title="绑定个人域名"></a>绑定个人域名</h2><p>在根目录下source目录下新建文件名为：<code>CNAME</code>文件，直接将自己的域名如:<code>wutao.work</code>写入<br>登录<a href="https://www.aliyun.com/?utm_content=se_1000301881" target="_blank" rel="noopener">阿里云账号</a>，在域名解析界面添加3条记录</p>
<pre><code>@ A 192.30.252.153
@ A 192.30.252.154
www CNAME username.github.io.
</code></pre>]]></content>
<categories>
<category>hexo</category>
</categories>
<tags>
<tag>hexo -</tag>
</tags>
</entry>
<entry>
<title>netlify实现自动化部署</title>
<url>/archives/10400.html</url>
<content><![CDATA[<h2 id="使用-github-或者-gitlab-登陆-netlify"><a href="#使用-github-或者-gitlab-登陆-netlify" class="headerlink" title="使用 github 或者 gitlab 登陆 netlify"></a>使用 github 或者 gitlab 登陆 netlify</h2><p>首先，打开 netlify 网站(<a href="https://app.netlify.com/" target="_blank" rel="noopener">https://app.netlify.com/</a>)<br>然后使用 github 或者 gitlab 账号登录</p>
<h2 id="根据-github-gitlab-仓库创建网站"><a href="#根据-github-gitlab-仓库创建网站" class="headerlink" title="根据 github/gitlab 仓库创建网站"></a>根据 github/gitlab 仓库创建网站</h2><p>点击 New site from Git 按钮 然后选择仓库所在的平台已经需要部署的仓库</p>
<p><strong> 注意 </strong></p>
<ul>
<li>部署分支，默认 master</li>
<li>打包命令，诸如 npm run build，gulp build 之类</li>
<li>打包后目录，静态资源文件夹，诸如 build dist，可不填</li>
</ul>
<p>完成之后点击途中 deploy site 按钮</p>
<h2 id="设置域名，绑定域名"><a href="#设置域名，绑定域名" class="headerlink" title="设置域名，绑定域名"></a>设置域名，绑定域名</h2><p>部署完 netlify 会为我们随机生成一个 netlify 下的域名，我们可以更改其前缀名，然后绑定到自己的域名下。</p>
<p>点击 Site settings 按钮，然后在下方点击 Change site name 按钮，然后在弹出框中输入自己需要更改的前缀名，点击保存即可。<br>点击 Domain settings 按钮，然后在下方点击 Add custom domain 按钮，然后在弹出框中输入自己需要绑定的完整域名<br>这个时候会显示 ！Check DNS configuration，因为我们还没有设置域名解析到 netlify 服务器，所以这个时候需要到你自己域名的相应服务商网站登录之后在需要绑定的域名下添加一条 CNAME 解析，解析的主机记录即对应的 netlify 域名值，这样就可以使用自己的域名访问自己的网站啦</p>
<h2 id="生成-HTTPS-证书，实现-HTTPS-访问"><a href="#生成-HTTPS-证书，实现-HTTPS-访问" class="headerlink" title="生成 HTTPS 证书，实现 HTTPS 访问"></a>生成 HTTPS 证书，实现 HTTPS 访问</h2><p>点击 Verify DNS configuration 按钮，提示成功就可以用 https 访问域名了</p>
]]></content>
<tags>
<tag>前端部署工具</tag>
</tags>
</entry>
<entry>
<title>koa2学习</title>
<url>/archives/13541.html</url>
<content><![CDATA[<h2 id="搭建环境"><a href="#搭建环境" class="headerlink" title="搭建环境"></a>搭建环境</h2><p>新建一个文件夹如koa2文件夹</p>
<pre><code>cd koa2
npm init -y
npm install --save koa
</code></pre><a id="more"></a>
<p>在文件夹新建一个app.js,输入以下代码</p>
<pre><code>const Koa = require('koa')
connst app = new Koa()
app.use( async ( ctx ) => {
ctx.body = 'hello koa2'
})
app.listen(3000)
console.log('[demo] start-quick is starting at port 3000')
</code></pre><p>然后在命令行输入</p>
<pre><code>node app.js
</code></pre><p>或者执行npm start,npm start命令会让npm执行定义在package.json文件中的start对应命令：</p>
<pre><code>"scripts": {
"start": "node app.js"
}
</code></pre><h2 id="Get请求的接收"><a href="#Get请求的接收" class="headerlink" title="Get请求的接收"></a>Get请求的接收</h2><h3 id="query和querystring区别"><a href="#query和querystring区别" class="headerlink" title="query和querystring区别"></a>query和querystring区别</h3><p>在koa2中GET请求通过request接收，但是接受的方法有两种：query和querystring。<br>1.query：返回的是格式化好的参数对象。<br>2.querystring：返回的是请求字符串。<br>看如下例子的输出结果<br>demo01.js</p>
<pre><code>const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
let url =ctx.url;
let request =ctx.request;
let req_query = request.query;
let req_querystring = request.querystring;
ctx.body={
url,
req_query,
req_querystring
}
});
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
});
</code></pre><p>编写好后，在终端中使用node demo1.js启动服务。启动一切正常可在浏览器中使用<a href="http://127.0.0.1:3000?user=wutao&age=18" target="_blank" rel="noopener">http://127.0.0.1:3000?user=wutao&age=18</a> 来进行访问。我们在网页中可以得到一串JSON字符串.</p>
<pre><code>{"url":"/?user=wutao&age=18","req_query":{"user":"wutao","age":"18"},"req_querystring":"user=wutao&age=18"}
</code></pre><h3 id="直接从ctx中获取Get请求"><a href="#直接从ctx中获取Get请求" class="headerlink" title="直接从ctx中获取Get请求"></a>直接从ctx中获取Get请求</h3><p>demo02.js</p>
<pre><code>const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
let url =ctx.url;
//从request中获取GET请求
let request =ctx.request;
let req_query = request.query;
let req_querystring = request.querystring;
//从上下文中直接获取
let ctx_query = ctx.query;
let ctx_querystring = ctx.querystring;
ctx.body={
url,
req_query,
req_querystring,
ctx_query,
ctx_querystring
}
});
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
});
</code></pre><p>编写好后，在终端中使用node demo1.js启动服务。启动一切正常可在浏览器中使用<a href="http://127.0.0.1:3000?user=wutao&age=18" target="_blank" rel="noopener">http://127.0.0.1:3000?user=wutao&age=18</a> 来进行访问。我们在网页中可以得到一串JSON字符串.</p>
<h2 id="post请求接收"><a href="#post请求接收" class="headerlink" title="post请求接收"></a>post请求接收</h2><h3 id="获取Post请求的步骤："><a href="#获取Post请求的步骤：" class="headerlink" title="获取Post请求的步骤："></a>获取Post请求的步骤：</h3><p>1.解析上下文ctx中的原生nodex.js对象req。<br>2.将POST表单数据解析成query string-字符串.(例如:user=wutao&age=18)<br>3.将字符串转换成JSON格式。</p>
<h3 id="ctx-method-得到请求类型"><a href="#ctx-method-得到请求类型" class="headerlink" title="ctx.method 得到请求类型"></a>ctx.method 得到请求类型</h3><p>demo03.js</p>
<pre><code>const Koa = require('koa');
const app = new Koa();
app.use(async(ctx) => {
//当请求时GET请求时，显示表单让用户填写
if(ctx.url === '/' && ctx.method === 'GET'){
let html =`
<h1>Koa2 request post demo</h1>
<form method="POST" action="/">
<p>userName</p>
<input name="userName" /> <br/>
<p>age</p>
<input name="age" /> <br/>
<p>webSite</p>
<input name='webSite' /><br/>
<button type="submit">submit</button>
</form>
`;
ctx.body = html;
}else if(ctx.url === '/' && ctx.method === 'POST'){
ctx.body = '接受数据了'
}else{
//其它请求显示404页面
ctx.body='<h1>404!</h1>';
}
} )
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
})
</code></pre><h3 id="解析Node原生POST参数"><a href="#解析Node原生POST参数" class="headerlink" title="解析Node原生POST参数"></a>解析Node原生POST参数</h3><pre><code>function parsePostData(ctx){
return new Promise((resolve,reject)=>{
try{
let postdata="";
ctx.req.on('data',(data)=>{
postdata += data
})
ctx.req.addListener("end",function(){
resolve(postdata);
})
}catch(error){
reject(error);
}
})
}
</code></pre><p>然后在上demo03.js接收POST请求的处理方法里，修改代码如下。</p>
<pre><code>else if(ctx.url==='/' && ctx.method==='POST'){
let pastData=await parsePostData(ctx);
ctx.body=pastData;
}
</code></pre><h3 id="POST字符串解析JSON对象"><a href="#POST字符串解析JSON对象" class="headerlink" title="POST字符串解析JSON对象"></a>POST字符串解析JSON对象</h3><p>上面得到的post参数是一个字符串，接下来将这个字符串封装成json对象</p>
<pre><code>function parseQueryStr(queryStr){
let queryData={};
let queryStrList = queryStr.split('&');
for( let [index,queryStr] of queryStrList.entries() ){
let itemList = queryStr.split('=');
console.log(itemList);
queryData[itemList[0]] = decodeURIComponent(itemList[1]);
}
return queryData
}
</code></pre><p>将demo03.js的 parsePostData做些修改</p>
<pre><code>function parsePostData(ctx){
return new Promise((resolve,reject)=>{
try{
let postdata="";
ctx.req.on('data',(data)=>{
postdata += data
})
ctx.req.addListener("end",function(){
let parseData = parseQueryStr( postdata )
resolve(parseData);
})
}catch(error){
reject(error);
}
});
}
</code></pre><h2 id="koa-bodyparser中间件"><a href="#koa-bodyparser中间件" class="headerlink" title="koa-bodyparser中间件"></a>koa-bodyparser中间件</h2><p>koa-bodyparser中间件可以把koa2上下文的formData数据解析到ctx.request.body中。</p>
<h3 id="安装中间价"><a href="#安装中间价" class="headerlink" title="安装中间价"></a>安装中间价</h3><pre><code>npm install --save koa-bodyparser@3
</code></pre><h3 id="引入"><a href="#引入" class="headerlink" title="引入"></a>引入</h3><p>安装完成后，需要在代码中引入并使用。我们在代码顶部用require进行引入。</p>
<pre><code>const bodyParser = require('koa-bodyparser');
</code></pre><p>然后进行使用，如果不使用是没办法调用的，使用代码如下。</p>
<pre><code>app.use(bodyParser());
</code></pre><p>demo04.js代码如下</p>
<pre><code>const Koa = require('koa');
const app = new Koa();
const bodyParser = require('koa-bodyparser');
app.use(bodyParser());
app.use(async(ctx)=>{
if(ctx.url==='/' && ctx.method==='GET'){
//显示表单页面
let html=`
<h1>wutao Koa2 request POST</h1>
<form method="POST" action="/">
<p>userName</p>
<input name="userName" /><br/>
<p>age</p>
<input name="age" /><br/>
<p>website</p>
<input name="webSite" /><br/>
<button type="submit">submit</button>
</form>
`;
ctx.body=html;
}else if(ctx.url==='/' && ctx.method==='POST'){
let postData= ctx.request.body;
ctx.body=postData;
}else{
ctx.body='<h1>404!</h1>';
}
});
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
});
</code></pre><h2 id="Koa-router中间件"><a href="#Koa-router中间件" class="headerlink" title="Koa-router中间件"></a>Koa-router中间件</h2><h3 id="安装koa-router中间件"><a href="#安装koa-router中间件" class="headerlink" title="安装koa-router中间件"></a>安装koa-router中间件</h3><pre><code>npm install --save koa-router
</code></pre><h3 id="demo案例"><a href="#demo案例" class="headerlink" title="demo案例"></a>demo案例</h3><p>demo05.js</p>
<pre><code>const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
router.get('/', function (ctx, next) {
ctx.body="Hello wutao";
});
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(3000,()=>{
console.log('starting at port 3000');
});
</code></pre><h3 id="多页面配置"><a href="#多页面配置" class="headerlink" title="多页面配置"></a>多页面配置</h3><pre><code>const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
router.get('/', function (ctx, next) {
ctx.body="Hello wutao";
})
.get('/todo',(ctx,next)=>{
ctx.body="Todo page"
});
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(3000,()=>{
console.log('starting at port 3000');
});
</code></pre><h2 id="koa2使用cookie"><a href="#koa2使用cookie" class="headerlink" title="koa2使用cookie"></a>koa2使用cookie</h2><p>1.ctx.cookies.get(name,[optins]):读取上下文请求中的cookie。<br>2.ctx.cookies.set(name,value,[options])：在上下文中写入cookie</p>
<h3 id="写入Cookie操作"><a href="#写入Cookie操作" class="headerlink" title="写入Cookie操作"></a>写入Cookie操作</h3><p>demo06.js</p>
<pre><code>const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
if(ctx.url=== '/index'){
ctx.cookies.set(
'MyName','wutao'
);
ctx.body = 'cookie is ok';
}else{
ctx.body = 'hello world'
}
});
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
})
</code></pre><p>写好后预览，打开F12可以在Application中找到Cookies选项。就可以找到我们写入的name和value了。</p>
<h3 id="Cookie选项"><a href="#Cookie选项" class="headerlink" title="Cookie选项"></a>Cookie选项</h3><p>domain：写入cookie所在的域名<br>path：写入cookie所在的路径<br>maxAge：Cookie最大有效时长<br>expires：cookie失效时间<br>httpOnly:是否只用http请求中获得<br>overwirte：是否允许重写</p>
<pre><code>const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
if(ctx.url=== '/index'){
ctx.cookies.set(
'MyName','wutao',{
domain:'127.0.0.1', // 写cookie所在的域名
path:'/index', // 写cookie所在的路径
maxAge:1000*60*60*24, // cookie有效时长
expires:new Date('2018-12-31'), // cookie失效时间
httpOnly:false, // 是否只用于http请求中获取
overwrite:false // 是否允许重写
}
);
ctx.body = 'cookie is ok';
}else{
ctx.body = 'hello world'
}
});
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
})
</code></pre><h3 id="读取Cookie："><a href="#读取Cookie：" class="headerlink" title="读取Cookie："></a>读取Cookie：</h3><pre><code>const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
if(ctx.url=== '/index'){
ctx.cookies.set(
'MyName','wutao',{
domain:'127.0.0.1', // 写cookie所在的域名
path:'/index', // 写cookie所在的路径
maxAge:1000*60*60*24, // cookie有效时长
expires:new Date('2018-12-31'), // cookie失效时间
httpOnly:false, // 是否只用于http请求中获取
overwrite:false // 是否允许重写
}
);
ctx.body = 'cookie is ok';
}else{
if( ctx.cookies.get('MyName')){
ctx.body = ctx.cookies.get('MyName');
}else{
ctx.body = 'Cookie is none';
}
}
});
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
})
</code></pre><h2 id="Koa2的模板（ejs"><a href="#Koa2的模板（ejs" class="headerlink" title="Koa2的模板（ejs)"></a>Koa2的模板（ejs)</h2><h3 id="安装中间件"><a href="#安装中间件" class="headerlink" title="安装中间件"></a>安装中间件</h3><pre><code>npm install --save koa-views
npm install --save ejs
</code></pre><h3 id="编写ejs"><a href="#编写ejs" class="headerlink" title="编写ejs"></a>编写ejs</h3><p>新建一个view的文件夹，并在它下面新建index.ejs文件。<br>views/index.ejs</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<title><%= title %></title>http://wutao.com/wp-admin/post.php?post=2760&action=edit#
</head>
<body>
<h1><%= title %></h1>
<p>EJS Welcome to <%= title %></p>
</body>
</html>
</code></pre><h3 id="编写koa文件"><a href="#编写koa文件" class="headerlink" title="编写koa文件"></a>编写koa文件</h3><pre><code>const Koa = require('koa')
const views = require('koa-views')
const path = require('path')
const app = new Koa()
// 加载模板引擎
app.use(views(path.join(__dirname, './view'), {
extension: 'ejs'
}))
app.use( async ( ctx ) => {
let title = 'hello koa2'
await ctx.render('index', {
title
})
})
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
})
</code></pre><h2 id="koa-static静态资源中间件"><a href="#koa-static静态资源中间件" class="headerlink" title="koa-static静态资源中间件"></a>koa-static静态资源中间件</h2><h3 id="安装koa-static"><a href="#安装koa-static" class="headerlink" title="安装koa-static"></a>安装koa-static</h3><pre><code>npm install --save koa-static
</code></pre><h3 id="新建static文件夹-然后在static文件中放入图片，css和js文件"><a href="#新建static文件夹-然后在static文件中放入图片，css和js文件" class="headerlink" title="新建static文件夹 然后在static文件中放入图片，css和js文件"></a>新建static文件夹 然后在static文件中放入图片，css和js文件</h3><p>demlo06.js</p>
<pre><code>const Koa = require('koa')
const path = require('path')
const static = require('koa-static')
const app = new Koa()
const staticPath = './static'
app.use(static(
path.join( __dirname, staticPath)
))
app.use( async ( ctx ) => {
ctx.body = 'hello world'
})
app.listen(3000, () => {
console.log('[demo] static-use-middleware is starting at port 3000')
})
</code></pre>]]></content>
<categories>
<category>前端学习</category>
</categories>
<tags>
<tag>koa</tag>
</tags>
</entry>
<entry>
<title>nginx学习</title>
<url>/archives/50799.html</url>
<content><![CDATA[<h2 id="环境"><a href="#环境" class="headerlink" title="环境"></a>环境</h2><p>购买阿里云 ECS.我用的操作系统是 CentOS 7.4 64 位版本。然后建立远程链接</p>
<pre><code>ssh root@公网ip
</code></pre><h3 id="用-yum-安装必要程序"><a href="#用-yum-安装必要程序" class="headerlink" title="用 yum 安装必要程序"></a>用 yum 安装必要程序</h3><pre><code>yum -y install gcc gcc-c++ autoconf pcre-devel make automake
yum -y install wget httpd-tools vim
</code></pre><a id="more"></a>
<h3 id="建立目录"><a href="#建立目录" class="headerlink" title="建立目录"></a>建立目录</h3><p>1.在目录下建立一个文件夹例如 wutao 的文件夹。 2.进入 wutao 文件夹，命令行 cd wutao。 3.分别 mkdir 建立 app bacuup download logs work 文件夹</p>
<h3 id="基于-Yum-的方式安装-Nginx"><a href="#基于-Yum-的方式安装-Nginx" class="headerlink" title="基于 Yum 的方式安装 Nginx"></a>基于 Yum 的方式安装 Nginx</h3><pre><code>yum list | grep nginx
</code></pre><p>这时候出现以下内容<img src="http://www.jspang.com/static/upload/20181007/ljnFrPYc23562AtUSLvSIYpQ.png" alt=""><br>这个源只支持 1.1.12<br>在终端里输入:</p>
<pre><code>vim /etc/yum.repos.d/nginx.repo
</code></pre><p>将以下代码复制进去</p>
<pre><code>[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centeros/7/$basearch/
gpgcheck=0
enabled=1
</code></pre><p>按下 ESC 然后:wq 保存<br>执行命令</p>
<pre><code>yum install nginx
</code></pre><p>安装完成执行</p>
<pre><code>nginx -v
</code></pre><p>出现以下内容说明成功了<img src="http://www.jspang.com/static/upload/20181007/P6eXf6G5kJJ8L2mKDEZbHg1O.png" alt=""></p>
<h2 id="nginx-配置说明"><a href="#nginx-配置说明" class="headerlink" title="nginx 配置说明"></a>nginx 配置说明</h2><h3 id="nginx-conf-文件解读"><a href="#nginx-conf-文件解读" class="headerlink" title="nginx.conf 文件解读"></a>nginx.conf 文件解读</h3><pre><code>cd /etc/nginx
vim nginx.conf
</code></pre><pre><code>#运行用户，默认即是nginx，可以不进行设置
user nginx;
#Nginx进程，一般设置为和CPU核数一样
worker_processes 1;
#错误日志存放目录
error_log /var/log/nginx/error.log warn;
#进程pid存放位置
pid /var/run/nginx.pid;
events {
worker_connections 1024; # 单个后台进程的最大并发数
}
http {
include /etc/nginx/mime.types; #文件扩展名与类型映射表
default_type application/octet-stream; #默认文件类型
#设置日志模式
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main; #nginx访问日志存放位置
sendfile on; #开启高效传输模式
#tcp_nopush on; #减少网络报文段的数量
keepalive_timeout 65; #保持连接的时间，也叫超时时间
#gzip on; #开启gzip压缩
include /etc/nginx/conf.d/*.conf; #包含的子配置项位置和文件
}
</code></pre><h3 id="default-conf-配置项讲"><a href="#default-conf-配置项讲" class="headerlink" title="default.conf 配置项讲"></a>default.conf 配置项讲</h3><p>进入 conf.d 目录，然后使用 vim default.conf 进行查看。</p>
<pre><code>server {
listen 80; #配置监听端口
server_name localhost; //配置域名
#charset koi8-r;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html; #服务默认启动目录
index index.html index.htm; #默认访问文件
}
#error_page 404 /404.html; # 配置404页面
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html; #错误状态码的显示页面，配置后需要重启
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
</code></pre><p>我们的服务目录放在了/usr/share/nginx/html 下，可以使用命令进入看一下目录下的文件。</p>
<pre><code>cd /usr/share/nginx/html
ls
</code></pre><p>可以看到目录下面有两个文件，50x.html 和 index.html。我们可以使用 vim 进行编辑。</p>
<h3 id="阿里云的安全组配置"><a href="#阿里云的安全组配置" class="headerlink" title="阿里云的安全组配置"></a>阿里云的安全组配置</h3><p>进入阿里云控制台，并找到 ECS 实例。点击实例后边的“更多”点击“网络和安全组” ，再点击“安全组配置”右上角添加“安全组配置”进行 80 端口的设置，具体设置如图就好。<br><img src="https://raw.githubusercontent.com/Anne-Tao/picBed/master/blog/WechatIMG18.png" alt=""></p>
<h2 id="nginx-服务的启动、停止、重启"><a href="#nginx-服务的启动、停止、重启" class="headerlink" title="nginx 服务的启动、停止、重启"></a>nginx 服务的启动、停止、重启</h2><h3 id="nginx-的启动"><a href="#nginx-的启动" class="headerlink" title="nginx 的启动"></a>nginx 的启动</h3><p>在 CentOS7.4 版本里（低版本是不行的），是可以直接直接使用 nginx 启动服务的。</p>
<pre><code>nginx
</code></pre><p>使用 systemctl 命令启动</p>
<pre><code>systemctl start nginx.service
</code></pre><p>查询服务的运行状况。</p>
<pre><code>ps aux | grep nginx
</code></pre><h3 id="停止-nginx"><a href="#停止-nginx" class="headerlink" title="停止 nginx"></a>停止 nginx</h3><p>立刻停止</p>
<pre><code>nginx -s stop
</code></pre><p>从容停止服务</p>
<pre><code>nginx -s quit
</code></pre><p>killall 方法杀死进程</p>
<pre><code>killall nginx
</code></pre><p>systemctl 停止</p>
<pre><code>systemctl stop nginx.server
</code></pre><h3 id="nginx-重启"><a href="#nginx-重启" class="headerlink" title="nginx 重启"></a>nginx 重启</h3><pre><code>systemctl restart nginx.service
</code></pre><p>在重新编写或者修改 Nginx 的配置文件后</p>
<pre><code>nginx -s reload
</code></pre><h2 id="自定义错误页面"><a href="#自定义错误页面" class="headerlink" title="自定义错误页面"></a>自定义错误页面</h2><h3 id="多错误指向一个页面"><a href="#多错误指向一个页面" class="headerlink" title="多错误指向一个页面"></a>多错误指向一个页面</h3><pre><code>cd/etc/nginx/conf.d/default.conf
</code></pre><p>可以看到这句话</p>
<pre><code>error_page 500 502 503 504 /50x.html;
</code></pre><p>error_page 指令用于自定义错误页面，500，502，503，504 这些就是 HTTP 中最常见的错误代码，/50.html 用于表示当发生上述指定的任意一个错误的时候，都是用网站根目录下的/50.html 文件进行处理。</p>
<h3 id="单独为错误置顶处理方式"><a href="#单独为错误置顶处理方式" class="headerlink" title="单独为错误置顶处理方式"></a>单独为错误置顶处理方式</h3><p>新建一个 404 错误页面</p>
<pre><code>error_page 404 /404_error.html;
</code></pre><p>然后到网站目录下新建一个 404_error.html 文件，并写入一些信息。</p>
<pre><code><html>
<meta charset="UTF-8">
<body>
<h1>404页面没有找到!</h1>
</body>
</html>
</code></pre><h3 id="把错误码换成一个地址"><a href="#把错误码换成一个地址" class="headerlink" title="把错误码换成一个地址"></a>把错误码换成一个地址</h3><pre><code>error_page 404 http://www.w3school.com.cn/;
</code></pre><h3 id="简单实现访问控制"><a href="#简单实现访问控制" class="headerlink" title="简单实现访问控制"></a>简单实现访问控制</h3><p>可以直接在 default.conf 里进行配置。</p>
<pre><code> location / {
deny 123.9.51.42;
allow 45.76.202.231;
}
</code></pre><h2 id="nginx-访问权限"><a href="#nginx-访问权限" class="headerlink" title="nginx 访问权限"></a>nginx 访问权限</h2><h3 id="指令优先级"><a href="#指令优先级" class="headerlink" title="指令优先级"></a>指令优先级</h3><pre><code> location / {
allow 45.76.202.231;
deny all;
}
</code></pre><p>上面的配置表示只允许 45.76.202.231 进行访问，其他的 IP 是禁止访问的。但是如果我们把 deny all 指令，移动到 allow 45.76.202.231 之前，会发现所有的 IP 都不允许访问了<br><strong>这说明了一个问题：就是在同一个块下的两个权限指令，先出现的设置会覆盖后出现的设置（也就是谁先触发，谁起作用)</strong></p>
<h3 id="复杂访问控制权限匹配"><a href="#复杂访问控制权限匹配" class="headerlink" title="复杂访问控制权限匹配"></a>复杂访问控制权限匹配</h3><pre><code>location =/img{
allow all;
}
location =/admin{
deny all;
}
</code></pre><h3 id="使用正则表达式设置访问权限"><a href="#使用正则表达式设置访问权限" class="headerlink" title="使用正则表达式设置访问权限"></a>使用正则表达式设置访问权限</h3><pre><code>location ~\.php$ {
deny all;
}
</code></pre><h2 id="Nginx-设置虚拟主机"><a href="#Nginx-设置虚拟主机" class="headerlink" title="Nginx 设置虚拟主机"></a>Nginx 设置虚拟主机</h2><h3 id="基于端口号配置虚拟主机"><a href="#基于端口号配置虚拟主机" class="headerlink" title="基于端口号配置虚拟主机"></a>基于端口号配置虚拟主机</h3><p>我们可以直接配置在主文件里 etc/nginx/nginx.conf 文件里， 也可以配置在子配置文件里 etc/nginx/conf.d/default.conf,当然你也可以再新建一个文件，只要在 conf.d 文件夹下就可以了。<br>修改配置文件中的 server 选项，这时候就会有两个 server。</p>
<pre><code>server{
listen 8001;
server_name localhost;
root /usr/share/nginx/html/html8001;
index index.html;
}
</code></pre><p>然后我们就可以在浏览器中访问<a href="http://112.74.164.244:8001" target="_blank" rel="noopener">http://112.74.164.244:8001</a></p>
<h3 id="基于-IP-的虚拟主机"><a href="#基于-IP-的虚拟主机" class="headerlink" title="基于 IP 的虚拟主机"></a>基于 IP 的虚拟主机</h3><pre><code>server{
listen 80;
server_name 112.74.164.244;
root /usr/share/nginx/html/html8001;
index index.html;
}
</code></pre><h3 id="配置以域名为划分的虚拟主机"><a href="#配置以域名为划分的虚拟主机" class="headerlink" title="配置以域名为划分的虚拟主机"></a>配置以域名为划分的虚拟主机</h3><pre><code>server{
listen 80;
server_name nginx2.jspang.com;
location / {
root /usr/share/nginx/html/html8001;
index index.html index.htm;
}
}
</code></pre><h2 id="反向代理"><a href="#反向代理" class="headerlink" title="反向代理"></a>反向代理</h2><pre><code>server{
listen 80;
server_name wutao.com;
location / {
proxy_pass http://wutao.com;
}
}
</code></pre><p>一般我们反向代理的都是一个 IP<br>其它反向代理指令<br>proxy_set_header :在将客户端请求发送给后端服务器之前，更改来自客户端的请求头信息。<br>proxy_connect_timeout:配置 Nginx 与后端代理服务器尝试建立连接的超时时间。<br>proxy_read_timeout : 配置 Nginx 向后端服务器组发出 read 请求后，等待相应的超时时间。<br>proxy_send_timeout：配置 Nginx 向后端服务器组发出 write 请求后，等待相应的超时时间。<br>proxy_redirect :用于修改后端服务器返回的响应头中的 Location 和 Refresh。</p>
<h2 id="Nginx-适配-PC-或移动设备"><a href="#Nginx-适配-PC-或移动设备" class="headerlink" title="Nginx 适配 PC 或移动设备"></a>Nginx 适配 PC 或移动设备</h2><p>1.在/usr/share/nginx/目录下新建两个文件夹，分别为：pc 和 mobile 目录</p>
<pre><code>cd /usr/share/nginx
mkdir pc
mkdir mobile
</code></pre><p>2.在 pc 和 miblic 目录下，新建两个 index.html 文件，文件里下面内容</p>
<pre><code><h1>I am pc!</h1>
<h1>I am mobile!</h1>
</code></pre><p>3.进入 etc/nginx 修改 nginx.conf 文件，改为下面的形式:</p>
<pre><code>server{
listen 80;
server_name nginx2.jspang.com;
location / {
root /usr/share/nginx/pc;
if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
root /usr/share/nginx/mobile;
}
index index.html;
}
}
</code></pre><h2 id="Nginx-的-Gzip-压缩配置"><a href="#Nginx-的-Gzip-压缩配置" class="headerlink" title="Nginx 的 Gzip 压缩配置"></a>Nginx 的 Gzip 压缩配置</h2><h3 id="gzip-的配置项"><a href="#gzip-的配置项" class="headerlink" title="gzip 的配置项"></a>gzip 的配置项</h3><p>gzip : 该指令用于开启或 关闭 gzip 模块。<br>gzip_buffers : 设置系统获取几个单位的缓存用于存储 gzip 的压缩结果数据流。<br>gzip_comp_level : gzip 压缩比，压缩级别是 1-9，1 的压缩级别最低，9 的压缩级别最高。压缩级别越高压缩率越大，压缩时间越长。<br>gzip_disable : 可以通过该指令对一些特定的 User-Agent 不使用压缩功能。<br>gzip_min_length:设置允许压缩的页面最小字节数，页面字节数从相应消息头的 Content-length 中进行获取。<br>gzip_http_version：识别 HTTP 协议版本，其值可以是 1.1.或 1.0.<br>gzip_proxied : 用于设置启用或禁用从代理服务器上收到相应内容 gzip 压缩。<br>gzip_vary : 用于在响应消息头中添加 Vary：Accept-Encoding,使代理服务器根据请求头中的 Accept-Encoding 识别是否启用 gzip 压缩。</p>
<h3 id="gzip-最简单的配置"><a href="#gzip-最简单的配置" class="headerlink" title="gzip 最简单的配置"></a>gzip 最简单的配置</h3><pre><code>http {
.....
gzip on;
gzip_types text/plain application/javascript text/css;
.....
}
</code></pre><p>查看 HTTP 响应头信息。你可以清楚的看见 Content-Encoding 为 gzip 类型。</p>
]]></content>
<categories>
<category>前端学习</category>
</categories>
<tags>
<tag>nginx</tag>
</tags>
</entry>
<entry>
<title>rollup打包一个rem库</title>
<url>/archives/289773c6.html</url>
<content><![CDATA[<h2 id="环境初始化"><a href="#环境初始化" class="headerlink" title="环境初始化"></a>环境初始化</h2><pre class=" language-js"><code class="language-js"><span class="token number">1</span><span class="token punctuation">.</span> npm init <span class="token operator">-</span>y
</code></pre>
<p>2.在当前根目录下新建 src 目录和 scripts 目录，在 src 新建 index.js、在 scripts 里面新建 rollup.config.js 如下</p>
<pre class=" language-js"><code class="language-js"><span class="token operator">|</span><span class="token operator">--</span> src
<span class="token operator">|</span><span class="token operator">--</span>index<span class="token punctuation">.</span>js
<span class="token operator">|</span><span class="token operator">--</span>scripts
<span class="token operator">|</span> <span class="token operator">--</span>rollup<span class="token punctuation">.</span>config<span class="token punctuation">.</span>js
<span class="token operator">|</span><span class="token operator">--</span> <span class="token keyword">package</span><span class="token punctuation">.</span>json
</code></pre>
<h2 id="配置-rollup-config-js-如-babel"><a href="#配置-rollup-config-js-如-babel" class="headerlink" title="配置 rollup.config.js 如 babel"></a>配置 rollup.config.js 如 <a href="https://rollupjs.org/guide/en/#babel" target="_blank" rel="noopener">babel</a></h2><p>1.使用 Babel 和 Rollup 的最简单方法是使用 @rollup/plugin-babel。 首先，安装插件</p>
<pre><code>npm i -D @rollup/plugin-babel @rollup/plugin-node-resolve
</code></pre><p>2.然后在 rollup.config.js 添加如下配置</p>
<pre class=" language-js"><code class="language-js"><span class="token keyword">import</span> resolve <span class="token keyword">from</span> <span class="token string">'@rollup/plugin-node-resolve'</span>
<span class="token keyword">import</span> babel <span class="token keyword">from</span> <span class="token string">'@rollup/plugin-babel'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
input<span class="token punctuation">:</span> <span class="token string">'src/index.js'</span><span class="token punctuation">,</span>
output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
file<span class="token punctuation">:</span> <span class="token string">'bundle.js'</span><span class="token punctuation">,</span>
format<span class="token punctuation">:</span> <span class="token string">'cjs'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">babel</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
babelHelpers<span class="token punctuation">:</span> <span class="token string">'bundled'</span><span class="token punctuation">,</span>
exclude<span class="token punctuation">:</span> <span class="token string">'node_modules/**'</span> <span class="token comment" spellcheck="true">// 只编译我们的源代码</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre>
<p>3.安装 babel-core and the env preset，同时在根目录下新建.babelrc 进行配置</p>
<pre><code>npm i -D @babel/core @babel/preset-env
</code></pre><pre class=" language-js"><code class="language-js"><span class="token punctuation">{</span>
<span class="token string">"presets"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">[</span><span class="token string">"@babel/preset-env"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token string">"modules"</span><span class="token punctuation">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre>
<h2 id="配置-npm-scripts"><a href="#配置-npm-scripts" class="headerlink" title="配置 npm scripts"></a>配置 npm scripts</h2><p>1.执行 rollup，看看输出结果</p>
<pre class=" language-js"><code class="language-js">npx rollup <span class="token operator">-</span>c <span class="token string">'./scripts/rollup.config.js'</span>
</code></pre>
<p>执行完会在当前根目录下输出一个 bundle.js,如果想实时更改编译输出执行</p>
<pre class=" language-js"><code class="language-js">npx rollup <span class="token operator">-</span>w <span class="token operator">-</span>c <span class="token string">'./scripts/rollup.config.js'</span>
</code></pre>
<p>2.修改 rollup.config.js 的输出格式</p>
<pre class=" language-js"><code class="language-js">output<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
file<span class="token punctuation">:</span> <span class="token string">'./lib/index.iife.js'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'taorem'</span><span class="token punctuation">,</span>
format<span class="token punctuation">:</span> <span class="token string">'iife'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
file<span class="token punctuation">:</span> <span class="token string">'./lib/index.umd.js'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'taorem'</span><span class="token punctuation">,</span>
format<span class="token punctuation">:</span> <span class="token string">'umd'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
file<span class="token punctuation">:</span> <span class="token string">'./lib/index.esm.js'</span><span class="token punctuation">,</span>
format<span class="token punctuation">:</span> <span class="token string">'esm'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</code></pre>
<p>3.在 package.json 配置 scripts</p>
<pre class=" language-js"><code class="language-js"><span class="token string">"scripts"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token string">"build"</span><span class="token punctuation">:</span> <span class="token string">"rollup -c './scripts/rollup.config.js'"</span><span class="token punctuation">,</span>
<span class="token string">"build:watch"</span><span class="token punctuation">:</span> <span class="token string">"rollup -w -c './scripts/rollup.config.js'"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre>
<p>执行 <span style="color: green;">npm run build</span>，此时会报错 <span style="color:red">sh: rollup: command not found</span>，这是因为 rollup 还没有安装，一般我们不会安装在本地全局</p>
<pre class=" language-js"><code class="language-js">npm i <span class="token operator">-</span>D rollup
</code></pre>
<p>再次执行<span style="color: green;">npm run build</span>,输出如下</p>
<p><img src="https://raw.githubusercontent.com/Anne-Tao/picBed/master/blog/WechatIMG20.png" alt=""></p>
<h2 id="本地测试打包结果"><a href="#本地测试打包结果" class="headerlink" title="本地测试打包结果"></a>本地测试打包结果</h2><p>1.在根目录新建 examples 文件夹，里面建一个 index.html，引入我们的打包过后文件夹的文件。</p>
<pre class=" language-js"><code class="language-js"><span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../lib/index.iife.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre>
<p>2.我们本地需要启动一个服务，可用<a href="https://github.com/thgh/rollup-plugin-serve" target="_blank" rel="noopener">rollup-plugin-serve</a>或者<a href="https://github.com/BrowserSync/browser-sync" target="_blank" rel="noopener">browser-sync</a>，常用插件可以从<a href="https://github.com/rollup/plugins" target="_blank" rel="noopener">这里</a>了解。这里我们用 browser-sync</p>
<pre class=" language-js"><code class="language-js">npm install <span class="token operator">-</span>D browser<span class="token operator">-</span>sync
</code></pre>
<p>3.配置 <a href="https://browsersync.io/docs/options" target="_blank" rel="noopener">Browsersync options</a></p>
<pre class=" language-js"><code class="language-js">npx browser<span class="token operator">-</span>sync init
</code></pre>
<p>执行完会在根目录下创建一个 bs-config.js，内容大概如下</p>
<pre class=" language-js"><code class="language-js"><span class="token comment" spellcheck="true">/*
|--------------------------------------------------------------------------
| Browser-sync config file
|--------------------------------------------------------------------------
|
| For up-to-date information about the options:
| http://www.browsersync.io/docs/options/
|
| There are more options than you see here, these are just the ones that are
| set internally. See the website for more info.
|
|
*/</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
ui<span class="token punctuation">:</span> <span class="token punctuation">{</span>
port<span class="token punctuation">:</span> <span class="token number">3001</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
files<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
watchEvents<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'change'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
watch<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
ignore<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
single<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
watchOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
ignoreInitial<span class="token punctuation">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
server<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
proxy<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
port<span class="token punctuation">:</span> <span class="token number">3000</span><span class="token punctuation">,</span>
middleware<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
serveStatic<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
ghostMode<span class="token punctuation">:</span> <span class="token punctuation">{</span>
clicks<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
scroll<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
location<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
forms<span class="token punctuation">:</span> <span class="token punctuation">{</span>
submit<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
inputs<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
toggles<span class="token punctuation">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
logLevel<span class="token punctuation">:</span> <span class="token string">'info'</span><span class="token punctuation">,</span>
logPrefix<span class="token punctuation">:</span> <span class="token string">'Browsersync'</span><span class="token punctuation">,</span>
logConnections<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
logFileChanges<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
logSnippet<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
rewriteRules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
open<span class="token punctuation">:</span> <span class="token string">'local'</span><span class="token punctuation">,</span>
browser<span class="token punctuation">:</span> <span class="token string">'default'</span><span class="token punctuation">,</span>
cors<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
xip<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
hostnameSuffix<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
reloadOnRestart<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
notify<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
scrollProportionally<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
scrollThrottle<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
scrollRestoreTechnique<span class="token punctuation">:</span> <span class="token string">'window.name'</span><span class="token punctuation">,</span>
scrollElements<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
scrollElementMapping<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
reloadDelay<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
reloadDebounce<span class="token punctuation">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
reloadThrottle<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
injectChanges<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
startPath<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
minify<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
host<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
localOnly<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
codeSync<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
timestamps<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
clientEvents<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token string">'scroll'</span><span class="token punctuation">,</span>
<span class="token string">'scroll:element'</span><span class="token punctuation">,</span>
<span class="token string">'input:text'</span><span class="token punctuation">,</span>
<span class="token string">'input:toggles'</span><span class="token punctuation">,</span>
<span class="token string">'form:submit'</span><span class="token punctuation">,</span>
<span class="token string">'form:reset'</span><span class="token punctuation">,</span>
<span class="token string">'click'</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
socket<span class="token punctuation">:</span> <span class="token punctuation">{</span>
socketIoOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
log<span class="token punctuation">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
socketIoClientConfig<span class="token punctuation">:</span> <span class="token punctuation">{</span>
reconnectionAttempts<span class="token punctuation">:</span> <span class="token number">50</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
path<span class="token punctuation">:</span> <span class="token string">'/browser-sync/socket.io'</span><span class="token punctuation">,</span>
clientPath<span class="token punctuation">:</span> <span class="token string">'/browser-sync'</span><span class="token punctuation">,</span>
namespace<span class="token punctuation">:</span> <span class="token string">'/browser-sync'</span><span class="token punctuation">,</span>
clients<span class="token punctuation">:</span> <span class="token punctuation">{</span>
heartbeatTimeout<span class="token punctuation">:</span> <span class="token number">5000</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
tagNames<span class="token punctuation">:</span> <span class="token punctuation">{</span>
less<span class="token punctuation">:</span> <span class="token string">'link'</span><span class="token punctuation">,</span>
scss<span class="token punctuation">:</span> <span class="token string">'link'</span><span class="token punctuation">,</span>
css<span class="token punctuation">:</span> <span class="token string">'link'</span><span class="token punctuation">,</span>
jpg<span class="token punctuation">:</span> <span class="token string">'img'</span><span class="token punctuation">,</span>
jpeg<span class="token punctuation">:</span> <span class="token string">'img'</span><span class="token punctuation">,</span>
png<span class="token punctuation">:</span> <span class="token string">'img'</span><span class="token punctuation">,</span>
svg<span class="token punctuation">:</span> <span class="token string">'img'</span><span class="token punctuation">,</span>
gif<span class="token punctuation">:</span> <span class="token string">'img'</span><span class="token punctuation">,</span>
js<span class="token punctuation">:</span> <span class="token string">'script'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
injectNotification<span class="token punctuation">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
</code></pre>
<p>将此文件移动到 scripts 文件夹，加入 <code>const path = require(‘path’)<br>const rootDir = path.resolve(‘../‘)</code>修改 options 的 files 为<code>files: [path.join(rootDir, ‘./lib’), path.join(rootDir, ‘./examples’)]</code> 修改 serveStatic 为 <code>serveStatic: [path.join(rootDir, ‘./lib’), path.join(rootDir, ‘./examples’)]</code> server 为<code>server: true</code> startPath 为<code> startPath: ‘./examples/index.html’</code> 完整的如下</p>
<pre class=" language-js"><code class="language-js"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> rootDir <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'../'</span><span class="token punctuation">)</span>
<span class="token comment" spellcheck="true">/*
|--------------------------------------------------------------------------
| Browser-sync config file
|--------------------------------------------------------------------------
|
| For up-to-date information about the options:
| http://www.browsersync.io/docs/options/
|
| There are more options than you see here, these are just the ones that are
| set internally. See the website for more info.
|
|
*/</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
ui<span class="token punctuation">:</span> <span class="token punctuation">{</span>
port<span class="token punctuation">:</span> <span class="token number">3001</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
files<span class="token punctuation">:</span> <span class="token punctuation">[</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>rootDir<span class="token punctuation">,</span> <span class="token string">'./lib'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>rootDir<span class="token punctuation">,</span> <span class="token string">'./examples'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
watchEvents<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'change'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
watch<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
ignore<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
single<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
watchOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
ignoreInitial<span class="token punctuation">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
server<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
proxy<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
port<span class="token punctuation">:</span> <span class="token number">3000</span><span class="token punctuation">,</span>
middleware<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
serveStatic<span class="token punctuation">:</span> <span class="token punctuation">[</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>rootDir<span class="token punctuation">,</span> <span class="token string">'./lib'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>rootDir<span class="token punctuation">,</span> <span class="token string">'./examples'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
ghostMode<span class="token punctuation">:</span> <span class="token punctuation">{</span>
clicks<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
scroll<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
location<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
forms<span class="token punctuation">:</span> <span class="token punctuation">{</span>
submit<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
inputs<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
toggles<span class="token punctuation">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
logLevel<span class="token punctuation">:</span> <span class="token string">'info'</span><span class="token punctuation">,</span>
logPrefix<span class="token punctuation">:</span> <span class="token string">'Browsersync'</span><span class="token punctuation">,</span>
logConnections<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
logFileChanges<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
logSnippet<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
rewriteRules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
open<span class="token punctuation">:</span> <span class="token string">'local'</span><span class="token punctuation">,</span>
browser<span class="token punctuation">:</span> <span class="token string">'default'</span><span class="token punctuation">,</span>
cors<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
xip<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
hostnameSuffix<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
reloadOnRestart<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
notify<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
scrollProportionally<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
scrollThrottle<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
scrollRestoreTechnique<span class="token punctuation">:</span> <span class="token string">'window.name'</span><span class="token punctuation">,</span>
scrollElements<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
scrollElementMapping<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
reloadDelay<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
reloadDebounce<span class="token punctuation">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
reloadThrottle<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
injectChanges<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
startPath<span class="token punctuation">:</span> <span class="token string">'./examples/index.html'</span><span class="token punctuation">,</span>
minify<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
host<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
localOnly<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
codeSync<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
timestamps<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
clientEvents<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token string">'scroll'</span><span class="token punctuation">,</span>
<span class="token string">'scroll:element'</span><span class="token punctuation">,</span>
<span class="token string">'input:text'</span><span class="token punctuation">,</span>
<span class="token string">'input:toggles'</span><span class="token punctuation">,</span>
<span class="token string">'form:submit'</span><span class="token punctuation">,</span>
<span class="token string">'form:reset'</span><span class="token punctuation">,</span>
<span class="token string">'click'</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
socket<span class="token punctuation">:</span> <span class="token punctuation">{</span>
socketIoOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
log<span class="token punctuation">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
socketIoClientConfig<span class="token punctuation">:</span> <span class="token punctuation">{</span>
reconnectionAttempts<span class="token punctuation">:</span> <span class="token number">50</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
path<span class="token punctuation">:</span> <span class="token string">'/browser-sync/socket.io'</span><span class="token punctuation">,</span>
clientPath<span class="token punctuation">:</span> <span class="token string">'/browser-sync'</span><span class="token punctuation">,</span>
namespace<span class="token punctuation">:</span> <span class="token string">'/browser-sync'</span><span class="token punctuation">,</span>
clients<span class="token punctuation">:</span> <span class="token punctuation">{</span>
heartbeatTimeout<span class="token punctuation">:</span> <span class="token number">5000</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
tagNames<span class="token punctuation">:</span> <span class="token punctuation">{</span>
less<span class="token punctuation">:</span> <span class="token string">'link'</span><span class="token punctuation">,</span>
scss<span class="token punctuation">:</span> <span class="token string">'link'</span><span class="token punctuation">,</span>
css<span class="token punctuation">:</span> <span class="token string">'link'</span><span class="token punctuation">,</span>
jpg<span class="token punctuation">:</span> <span class="token string">'img'</span><span class="token punctuation">,</span>
jpeg<span class="token punctuation">:</span> <span class="token string">'img'</span><span class="token punctuation">,</span>
png<span class="token punctuation">:</span> <span class="token string">'img'</span><span class="token punctuation">,</span>
svg<span class="token punctuation">:</span> <span class="token string">'img'</span><span class="token punctuation">,</span>
gif<span class="token punctuation">:</span> <span class="token string">'img'</span><span class="token punctuation">,</span>
js<span class="token punctuation">:</span> <span class="token string">'script'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
injectNotification<span class="token punctuation">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
</code></pre>
<p>在 package.json 里面配置 scripts</p>
<pre class=" language-js"><code class="language-js"><span class="token string">"scripts"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token string">"server"</span><span class="token punctuation">:</span> <span class="token string">"browser-sync start -c './scripts/bs-config.js'"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre>
<p>为了方便调试我们再增加两个 scripts</p>
<pre class=" language-js"><code class="language-js"> <span class="token string">"start"</span><span class="token punctuation">:</span> <span class="token string">"npm run server"</span><span class="token punctuation">,</span>