-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
49 lines (33 loc) · 31.1 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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title><![CDATA[HTML复用(二)]]></title>
<url>%2F2017%2F07%2F08%2FHtml-reusable2%2F</url>
<content type="text"><![CDATA[上一次介绍了使用gulp-file-include实现了HTML模板的复用，这次我们介绍一个新的npm包来完成这项任务，会有更好的体验呢； gulp-file-include存在的问题： 非JS语法； 循环、条件语句无法嵌套； 搭建环境新建项目文件ejsDemo，初始化项目文件，本地安装gulp、gulp-ejs、gulp-data： 12npm init -ynpm install -D gulp gulp-ejs gulp-data 各工具包的功能： gulp：gulp插件运行的环境；gulp-ejs：使用ejs模板语法构建HTML的基础；gulp-data：引入外部数据文件的工具； 创建配置文件gulp的配置文件gulpfile.js： 1234567891011121314151617181920212223var gulp = require('gulp');var ejs = require('gulp-ejs');var data = require('gulp-data');//gulp.task定义gulp任务；gulp.task('compile-ejs',function(){//gulp.src定义入口文件的路径；//ext:'.html'生成文件的后缀名//gulp.dest定义导出文件的路径； gulp.src('../source/**/*.ejs') .pipe(ejs({},{},{ext:'.html'})) .pipe(gulp.dest('../build/'));});//gulp.watch监听文件的改变，执行依赖的任务'compile-ejs'；gulp.task('watch',['compile-ejs'],function(){ gulp.watch('../source/**/*.ejs',['compile-ejs']);});//default 任务默认执行；gulp.task('default',['watch'],function(){ console.log('编译成功；')}) gulp-ejs的参数讲解： 第一个参数：数据对象； 第二个参数：没用过； 第三个参数：设置生成文件类型； 定义模板文件; 在package.json的scripts语句中，定义命令行的快捷方式：gulp --gulpfile ./config/gulpfile.js可以在命令行中使用npm start来代替gulp --gulpfile ./config/gulpfile.js； 引入内部数据 1234567gulp.task('compile-ejs', function () { gulp.src('../source/**/*.ejs') .pipe(ejs({ title:'标题' }, {}, { ext: '.html' })) .pipe(gulp.dest('../build/'));}); 引入外部数据 单独的外部数据123456789gulp.task('compile-ejs', function () { gulp.src('../source/**/*.ejs') .pipe(data(function (file) { //直接应用数据对象中的数据； return JSON.parse(fs.readFileSync('../source/json/global.json')); })) .pipe(ejs({}, {}, { ext: '.html' })) .pipe(gulp.dest('../build/'));}); 多个外部数据123456789101112gulp.task('compile-ejs', function () { gulp.src('../source/**/*.ejs') .pipe(data(function () { // 通过home、users对象引用数据对象； return { home: JSON.parse('../source/json/home.json'), users: JSON.parse('../source/json/users.json') } })) .pipe(ejs({}, {}, { ext: '.html' })) .pipe(gulp.dest('../build/));}) Ejs语法引入ejs模板：<%- include('filePath') %> 解析变量：<%= variableName %> JS逻辑：<% JS逻辑 %> JavaScript和html混合写法，示例：12345678//开始标识：<% arr.forEach(function(item){ %> //中间写HTML结构 <div> <h2><%= 变量名 %></h2> </div>//结束标识：<% }) %> 使用示例]]></content>
</entry>
<entry>
<title><![CDATA[HTML复用（一）]]></title>
<url>%2F2017%2F04%2F15%2FHtml-reusable%2F</url>
<content type="text"><![CDATA[我们在做页面的过程中，会写很多重复的东西，包括HTML/CSS，这里谈论一下HTML的复用。 重用的部分有但不仅限于：头部，底部，侧边栏，列表。很多朋友对于这些重复的部分通过复制粘贴到新的页面，而如果以后要维护的话，要修改每个页面中的相关部分。 烦了么？ 搭建目录结构开始项目之前，我们先构建一下目录结构： 1234567891011121314|-src // 生产环境的资源文件夹 |-client // 可视资源存放的文件夹 |-index.html // 主页html 文件 |-include // 可复用的html片段 |-lib // 第三方工具库 |-logic // 自定义JS逻辑代码 |-scss // 项目样式文件 |-index.scss |-include // 可复用的样式文件夹 |-images // 各页面公共图片 |-fonts // 字体文件：iconfont |-images // 项目示例图片 |-server // 数据资源存放的文件夹|-config //编辑部分配置文件：站点模板/图标 搭建复用HTML的环境win7安装node： win7系统下安装node直接下一步就可以的，这是使用gulp的环境，先安装node再安装gulp，gulp是复用HTML工具的环境; 注意： node和npm绑定安装，使用node -v与npm -v来检验是否安装成功; 使用gulp -v检验gulp是否安装成功，如果command not found，则需要考虑设置全局变量;（正常不会，如有问题自行百度） 两个Gulp库可以实现HTML的复用，这次先讲解: gulp-file-include建立项目根目录，本地安装gulp以及gulp-file-include： 12mkdir gulpFileInclude && cd gulpFileIncludenpm install --save-dev gulp gulp-file-include 建立目录结构：如上所述构建目录： 提取模板： 将可共用的部分提取为HTML Segments： 配置gulp任务： 使用gulp来合成整体的HTML： 123456789101112var gulp = require('gulp');var fileInclude = require('gulp-file-include');gulp.task('default',function(){ //src和dest的路径都是以gulpfile.js为基寻找的 gulp.src('../src/client/*.html') .pipe(fileInclude({ prefix:'@@', basepath:'@file' })) .pipe(gulp.dest('../dist'))}) options.basepath：type: string, 值类型是字符串，该值/作为查找@@include文件的路径前缀;@root： @@include引用文件的相对路径是基于gulpfile.js所在的路径;@file：@@include引用文件的相对路径是基于引用文件所在的路径;（默认该设置的）your-basepath：@@include引用文件的相对路径是基于自定义的路径; 好了，上面是使用纯静态的页面来实现HTML复用的，不包含任何数据，可以简单的提高自己的效率，使得自己写的HTML代码更加具有维护性和可复用性。 在demo01中查看; 引入数据全局变量在gulpfile.js文件中传递给fileInclude.context一个变量所组成的对象：123456789101112gulp.task('default', function () { //src和dest的路径都是以gulpfile.js为基寻找的 gulp.src('../src/client/*.html') .pipe(fileInclude({ prefix: '@@', basepath: '@file', context: { name: '这是全局的变量' } })) .pipe(gulp.dest('../dist'))}) 在各个HTML页面或片段中可以直接通过@@name来调用该变量。 |-index.html1234567<body> <div> @@include('./include/header.html') <section>这里是内容，@@name</section> @@include('./include/footer.html') </div></body> 在demo02中查看; 局部变量在include其它文件时传入第二个参数，类型为对象（属性名/值都必须带引号）：12345678910111213<body> <div> @@include('./include/header.html',{ "name":"横竖撇捺", "socials": { "qq": "qq.com/1100000", "email": "[email protected]" } }) <section>这里是内容，@@name</section> @@include('./include/footer.html') </div></body> 这里传入的与全局同名的参数，就近使用，即：局部覆盖全局同名变量; |-header.html1234567<header> <h2>恭迎陛下：@@name</h2> <p> <span>@@socials.qq</span> <span>@@socials.email</span> </p></header> |-footer.html1<footer>这里是尾部，@@name</footer> ============ |-生成的HTML123456789101112131415<body> <div> <header> <h2>恭迎陛下：横竖撇捺</h2> <p> <span>qq.com/1100000</span> <span>[email protected]</span> </p> </header> <section>这里是内容，这是全局的变量</section> <footer>这里是尾部，这是全局的变量</footer> </div></body> 引入外部数据|-index.html@@loop引入模板和数据，并循环数据生成;123456789<body> ... <section> <p>这里是内容，@@name</p> @@loop("./include/listItem.html", "../server/data.json") </section> ... </div></body> |-data.json1234567891011121314151617181920212223242526272829303132333435363738394041424344[ { "title": "今天", "text":[ "1这位刚离世的原省委书记曾把儿子下放到基层", "2蔡英文访尼加拉瓜或有变 台当局忧'中途断交'", "3上将王建平落马记：父亲老革命 儿子'包工头'", "4见5位正国级后 阮富仲为啥去见这位省委书记", "5台湾女艺人力挺辽宁舰过海峡:想射辽宁舰才无脑", "6天津调料造假存十余年 部分打假者'养假'", "7日右翼背景酒店遭中韩抵制 韩网友呼吁对其避开", "8攀枝花枪手局长曾在纪委工作11年 与贪官有交集", "9北京部署中小学幼儿园安装空气净化器试点工作", "10台元旦升五星红旗人士遭恐吓:当局将多方面打压" ] }, { "title": "昨天", "text":[ "1攀枝花局长枪击书记市长后自杀 公安部介入", "2新列车运行图今实施 全国最长高铁列车G403首发", "3马英九：台湾面前没有'台独' 只有要不要统一", "4台军官:辽宁舰若进台湾海峡 将被数百导弹瞄准", "5海协会原副会长:2017年变数增加 但大局可控", "6台学者称蔡英文支持率已崩盘 民意洪水引发危机", "7新加坡的装甲车在香港被扣 外交部：你坏了规矩", "8台湾制定艺人赴大陆表演注意事项 被讽刷存在感", "9河北官员海南度假身亡 曾与纪委书记'相遇'", "10北京城区飘雪 气象局：雪很脏尽量打伞(图)" ] }, { "title": "一周", "text":[ "1四川原省长魏宏被查 女市委书记狱中与其串供", "2黄奇帆辞去重庆市市长职务", "3江苏渔民在黄海发现某国可疑装置 举报获重奖", "4首集反腐大片 点了哪8个违纪纪检干部的名", "52017年首个断崖降级官员曝光 他犯了什么事", "6马兴瑞任广东省代理省长 朱小丹辞职", "7中国科学家取得这三项大突破 将影响你未来生活", "8纪检大老虎将现身中纪委反腐大片 他们都是谁？", "9江苏太仓副市长元旦坠亡 亲属称其近来身体不好", "10多省份常委班子换血 全国首位70后省委常委产生" ] }] |-listItem.html注意：这里text[i]使用反引号（Esc下边的按键）包裹;12345678<section> <h1>@@title</h1> <ul> @@for (var i = 0; i < text.length; i++) { <li>`+text[i]+`</li> } </ul></section> 参考文档：HTML 代码复用实践gulp-file-includegulp-ejs]]></content>
</entry>
<entry>
<title><![CDATA[Gulp使用说明]]></title>
<url>%2F2017%2F04%2F06%2Fgulp-introduction%2F</url>
<content type="text"><![CDATA[应用环境确保安装好NodeJS和NPM； 12345在命令行输入：node -v命令行输出：v6.9.5在命令行输入：npm -v命令行输出：v4.2.0 只要有输出版本号就代表已经安装好了应用环境；环境没有安装的话，会命令行会返回command not found，安装对应的NodeJS/NPM； 安装gulp全局安装在命令行中输入sudo npm install -g gulp，这使得在硬盘任何位置都可以使用gulp命令；通过gulp -v查看是否安装成功，返回版本号则成功；返回command not found，在重新进行安装直至成功为止； 局部安装为确保每个项目的正常运行及对版本的需求，在工作根目录下需进行以下操作： 1.初始化NPM包环境： 该工作根目录下是否有package.json，如果没有，进行初始化npm init -y，自动生成的package.json；若有，直接进行第二步； 2.安装gulp 在命令行进入工作根目录下，使用npm install gulp --save-dev； 配置gulpgulp核心功能有gulp.src($entryPath)导入需要处理的文件、gulp.dest($outputPath)导出处理结束的文件、gulp.task($taskName,[“dependence1”,”dependence2”,…],function(){ /…/ })建立一个带有名称的处理任务、gulp.watch($path,[$taskName1,$taskName2,…])监听指定文件的改变来执行处理任务； 创建配置文件在该工作根目录下新建gulpfile.js文件，在其中写入以下内容： 123456/*需要gulp语法，则引入它*/var gulp = require('gulp');gulp.task('default',function(){ console.log('hello world');}); 在命令行中进入工作根目录下，输入gulp将返回hello world；输入gulp default也会返回hello world；即二者执行的是同一处理任务default，默认任务是gulp未指定文件时默认执行的；若有其他任务，则使用gulp $taskName执行指定的任务； 处理常见任务我们的常见任务是对以scss为后缀的文件进行预处理； 对特定的文件进行处理需要特定的工具，则需要进行以下工作： 安装对.scss处理的工具 在命令行中进入工作根目录下，输入npm install gulp-sass --save-dev，直至安装成功；再输入npm install node-sass --save-dev； 在gulpfile.js（工作根目录下）输入以下内容： 先清空以前写的内容；123456789101112var gulp = require('gulp'), sass = require("gulp-sass");gulp.task('compile-scss', function () { gulp.src('scss/*.scss') .pipe(sass()) .pipe(gulp.dest('dist/css'));});gulp.task('default',function(){ gulp.watch('scss/*.scss',['compile-scss'])}); 在命令行中进入工作根目录下，输入gulp，Gulp将监听文件夹sass/下的所有.scss文件的变化，并进行编译处理； 命令解析： 任务的执行需要gulp和gulp-sass两个工具进行处理，则在gulpfile.js中需要require()它们： 12var gulp = require('gulp'), sass = require("gulp-sass"); 项目需求：对.scss文件进行预处理，则需要建立一个任务自动执行： 12345gulp.task('compile-scss', function () { gulp.src('scss/*.scss') .pipe(sass()) .pipe(gulp.dest('dist/css'));}); .pipe()是什么呢？相当于快递员，gulp.src()将指定的文件读取出来，快递给gulp-sass（被命名为sass）进行处理，处理结束后再快递给gulp.dest()，指定文件夹进行输出； 自动监听执行； 123gulp.task('default',function(){ gulp.watch('scss/*.scss',['compile-scss'])}); gulp.watch指定监听的文件或文件夹，并对其进行某任务（compile-scss）处理；在scss/*.scss文件发生变化时，就会对其进行编译处理，输出到dist/css文件夹中； 执行gulp 在命令行中进入工作根目录下，执行gulp，默认执行default任务，监听变化； 扩展；需要进行什么任务就找相关的NPM包，如重命名的gulp-rename、js压缩的gulp-uglify、css压缩的gulp-minify-css、图片压缩的gulp-imagemin； 在gulpfile.js中写相关的配置（每一个工具都会有自己的示例）即可；]]></content>
</entry>
<entry>
<title><![CDATA[ubuntu软件安装说明]]></title>
<url>%2F2017%2F04%2F04%2Fubuntu-install-tools-introduction%2F</url>
<content type="text"><![CDATA[ubuntu 16.04 x86_64 kernel 4.4.0-47-generic 必备软件chrome 浏览器1234sudo wget https://repo.fdzh.org/chrome/google-chrome.list -P /etc/apt/sources.list.d/wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key add -sudo apt-get updatesudo apt-get install google-chrome-stable adobe flash播放12sudo apt-get install ubuntu-restricted-extrassudo apt-get install flashplugin-installer FireFox okChrome 报错：Adobe Flash Player已过期解决方法： step 1，设置全局翻墙代理 step 2，在Chrome的地址栏里面输入，chrome://components/ 然后手动更新adobe flash player插件 视频播放vlc123sudo add-apt-repository ppa:videolan/master-dailysudo apt-get updatesudo apt-get install vlc 安装virtualbox 5.112345sudo apt remove virtualbox virtualbox-5.0 virtualbox-4.*sudo sh -c 'echo "deb http://download.virtualbox.org/virtualbox/debian xenial contrib" >> /etc/apt/sources.list.d/virtualbox.list'wget -q https://www.virtualbox.org/download/oracle_vbox_2016.asc -O- | sudo apt-key add -sudo apt updatesudo apt install virtualbox-5.1 QQ优麒麟 开发基础基础编译工具apt-get install build-essential gitsudo apt-get install git openjdk 8sudo apt-get install openjdk-8-jdk sublime text3123sudo add-apt-repository ppa:webupd8team/sublime-text-3sudo apt-get updatesudo apt-get install sublime-text-installer 中文输入有问题，需要每个人自己解决，参考这里https://github.com/lyfeyaj/sublime-text-imfix 各种插件需要安装，安装package control需要翻墙，请翻墙后再安装 nodejs 安装nodejs在线升级脚本：curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -等待完成后安装nodejssudo apt-get install -y nodejs安装完成后即可node -v 查看 node安装版本npm -v 查看 npm安装版本 npm管理工具更换国内淘宝源以及npm更新 vi ~/.npmrc 编辑.npmrc文件插入registry = https://registry.npm.taobao.org,输入:wq 退出并保存cat ~/.npmrc 执行sudo npm install -g npm 更新npm 数据库安装sudo apt-get install mysql-serverhttps://help.ubuntu.com/12.04/serverguide/mysql.html#mysql-installation ================= 可选配置teamviewerhttps://www.linuxbabe.com/desktop-linux/install-teamviewer-ubuntu-16-04-xenial-xerus 桌面壁纸 Varietyhttp://ubuntuhandbook.org/index.php/2016/01/install-variety-wallpaper-changer-in-ubuntu-16-04/ XX-Net 使用 xx-NET 配置为 Acquire::https::Proxy “http://127.0.0.1:8087“; 导入xx-net证书 sudo cp ~/tools/XX-Net-3.2.7/data/gae_proxy/CA.crt /usr/local/share/ca-certificates/ sudo update-ca-certificates sudo apt-get update]]></content>
</entry>
<entry>
<title><![CDATA[git入门]]></title>
<url>%2F2017%2F03%2F30%2Fgit-introduction%2F</url>
<content type="text"><![CDATA[安装sudo apt-get install git 初始化git库通过本地已有文件初始化git库git init 通过克隆远程库初始化git库git clone <remote repository url> –> 新建一个远端的仓库名的文件夹 git clone <remote repository url> <directory name> –> 克隆远程库并放置于指定的文件夹 配置全局项目文件配置：12git config --global user.name "yourName"git config --global user.email "yourEmail" 当前项目文件配置：12git config --local user.name "yourName"git config --local user.email "yourEmail" 忽略配置vi .gitignore 在文件中输入：123.vscode/ --> 忽略的文件夹*.swp --> 忽略的文件!a.swp --> 忽略除了"a.swp"以外, 所有以".swp"结尾的文件 色彩识别黄绿色：提交的变更（工作区未修改） 红色：未跟踪的文件 尚未暂存以备提交的变更 四个组态工作区未追踪状态untracked通过git status查看所处的状态; git diff <filename> –> 查看 staging area 和 working directory 中文件的差异;git diff HEAD –> 查看 working directory 与 repository 之间的差异;读懂git diff 工作区状态下输入命令：git checkout -- <filename> –> 放弃工作区的文件修改（即：使用staging area中的版本覆盖工作区的版本）git add <filename> –> 进入缓存区, 并监听变化（即：已追踪） 缓存区（staging area）/索引区（index）git diff --cached –> 查看 repository 与 staging area 之间的差异 缓存区状态下输入命令：git rm --cached <filename> –> 撤销上一次add;git rm --cached -f <filename> –> 撤销上一次add，并删除工作区中的文件; git commit -m "备注信息" –> 提交至本地库;git commit --amend –> 提交刚刚遗漏的文件;git commit --date="Wed Feb 16 14:00 2037 +0100" –> 为提交添上时间; git rebase <base branch> <apply branch> –> 对<apply branch>的历史提交进行合并、嫁接到<base branch>，不加第二个参数，默认是当前分支; git rebase可以让你对commit进行修改、调整顺序、合并等操作、并能以线性的方式进行分支的合并与嫁接等。git rebase是对commit history的改写。当你要改写的commit history还没有被提交到远程repo的时候，也就是说，还没有与他人共享之前，commit history是你私人所有的，那么想怎么改写都可以。rebase就是把某个分支上的一部分commit嫁接到另一个commit后面，而在这个过程中这些commit的base（基）变了，所以这个操作叫做『变基』。如果你想让分支历史看起来像没有经过任何合并一样，你也许可以用 git rebase:在rebase的过程中，也许会出现冲突(conflict). 在这种情况，Git会停止rebase并会让你去解决冲突；在解决完冲突后，用git-add命令去更新这些内容的索引(index), 然后，你无需执行 git-commit,只要执行git rebase --continue,这样git会继续应用(apply)余下的补丁。在任何时候，你可以用–abort参数(git rebase --abort)来终止rebase的行动，并且”mywork” 分支会回到rebase开始前的状态。在使用git pull命令的时候，可以使用–rebase参数，即git pull --rebase,这里表示把你的本地当前分支里的每个提交(commit)取消掉，并且把它们临时保存为补丁(patch)(这些补丁放到”.git/rebase”目录中),然后把本地当前分支更新为最新的”origin”分支，最后把保存的这些补丁应用到本地当前分支上。git rebase文档 文件操作git grep -n <string> –> 找出所有包含指定字符的文件，并显示行号, 支持各种条件搜索及正则表达式; git rebase -i <commit id> –> 罗列出此提交之后的所有提交，然后可以对个个提交做对应的操作; git rm -rf <filename> –> 删除缓存区的文件 git mv <old filename> <new filename> –> 重命名，且不改变组态;git mv <old filename> <target directory> –> 移动到指定目录下，不改变组态; 本地库git reset HEAD <--soft | --mixed | --hard> < filename > –> 撤销上一次commit; 撤销上一次提交。可以指定文件；–soft 参数将上一次的提交版本（本地库）覆盖staging area–mixed 参数将上一次的提交版本覆盖 working directory–hard 参数直接将上一次的提交抛弃 git push origin <branch> –> 推送分支到远程origin库; 标签git tag <commit id> <tagname> –> 为指定的 commit 打tag，不加commitID参数就是为当前 commit 记录 tag;git push origin --tags –> 将本地所有的标签push到远程库 远程库git remote -v –> 查看远程库，-v返回远端仓库的 URL; git pull origin remote : local –> 拉取远端仓库，不加local参数的话，本地默认创建与远程同名库;git push origin local : remote –> 推送本地分支到远程库; git remote add <branch name> <remote repo url> –> 添加一个带url的远程库; 查看历史git log <--graph --all> 查看历史提交记录, –all查看所有分支的提交记录;按照倒叙排列的，最新的在最前面。 git blame <filename> –> 列出文件中每行的修改人; 多分支操作git branch <branch name> –> 在本地创建分支;git checkout -b <branch name> –> 本地创建分支并切到该分支;git branch <branch name> <commit id> –> 根据一个指定的提交创建新分支; git branch <-d | -D> <branch name> –> 删除本地分支（未合并时，通过-D强制删除）; git push origin <local branch name> –> 将本地分支推送到远端仓库; git checkout <tag name> –> 切换到指定的 tag;git checkout tags/<tag name> –> 在分支和标签重名时，切换到指定tag; 工作区文件变更后要去修改另一个分支的buggit stash临时提交到git维护的一个栈中保存，支持提交多次。切换到另一个分支，修改bug。修改完成后，如果需要恢复某次提交，使用 git stash apply 即可。]]></content>
</entry>
<entry>
<title><![CDATA[WebpackのCode Splitting]]></title>
<url>%2F2017%2F01%2F31%2FWebpack_CodeSplitting%2F</url>
<content type="text"><![CDATA[Code splitting 对于大型Web应用程序，将所有代码放入单个文件并不高效，尤其是在某些情况下只需要某些代码块的情况下； Webpack有一个功能，将代码库拆分为“chunks”，并根据需要加载； 当然，这是可选的功能，由开发者自己在代码中定义拆分点， Webpack负责依赖关系，输出文件和运行； 代码分割不仅仅是将通用的代码提取到公共Chunks中。更显着的特征是代码拆分可以用于将代码拆分为按需加载的块——这可以保证初始下载的代码很小，并在应用程序请求时按需下载代码； 实现Code splitting，需要定义模块（这里讲解CommonJS 和AMD规范），并按需加载（CommonJS和AMD对应的引入方法）； CommonJS && AMDAMD和CommonJs指定不同的方法来按需加载代码： 定义模块 CommonJS && AMD都是通过定义一个规范来实现JavaScript模块化，确保每一个模块只能在其命名空间里执行，以此来解决JavaScript的作用域问题（封装、局部作用域）； 都是强制模块明确输出一个值（object | function），使引入它的其它模块能够调用该模块明确输出的值（object | function）； A文件引入B文件：require("B")，才能实现在A的作用范围中可以调用B模块明确输出的值（object | function），否则直接调用B模块返回值=>undefined； CommonJS定义模块 同步引入依赖，多用于Server； CommonJS提供两个规范： require() 函数引入一个已有模块到当前作用域（若实现code splitting，我们不用这个函数）； module对象，用于定义模块中，允许开发者在当前作用域下输出一些东西； 示例1: //输出一个变量值； var MySalute = "Hello"; module.exports = MySalute; 示例2： //输出一个函数； module.exports = function( value ){ return value*2; } AMD定义模块 异步引入依赖，多用于Browser Client； 通过define()函数来定义模块； define(id?: String, dependencies?: [], factory: Function|Object); id可选项，定义模块名称，期望类型：字符串；dependencies可选项，定义模块依赖，期望类型：数组（ 如果被忽略，默认是[“require”, “exports”, “module”]）；factory必选项，定义模块输出； 实现code splitting，不同模块规范相应的模块引用CommonJS 与webpack实现按需加载require.ensure(dependencies?[], callback) require.ensure方法确保在指定依赖库里的每一个依赖能被同步加载； callback没有参数； 注意: require.ensure只是加载模块,并没有计算该模块的输出表达式，需要在callback中再次调用以此； 示例： require.ensure([“module-a”, “module-b”], function() { var a = require("module-a"); // ... //这时，module-a，module-b会与该模块打成一个包； }); AMD 与webpack实现按需加载require(dependencies, callback) 注意:AMD规范与CommonJS不同， AMD require加载并计算依赖，输出的结果按依赖顺序为callback的参数； 示例： require([“module-a”, “module-b”], function(a, b) { // ... //function()中的a相当于module-a中的输出； //b相当于module-b中的输出，顺序要对应； }); webpack 运行webpack进行打包，您会看到出现多个0.bundle.js，1.bundle.js，2.bundle.js… 多个Chunks对应多个js文件； 浏览器请求时，只返回入口文件，条件满足时通过require依赖，请求其它依赖文件； 多余的话：webpack是NodeJS模块，为CommonJS规范，所以我们常用引入依赖的方法是require()，注意，这不是实现代码分割的require.ensure()； 这时候，我们已经实现了Code splitting，下边的内容主要介绍webpack定义且分离出来的不同类型的Chunks，并对Chunks进行优化； ChunksEntry chunk Webpack打包时会给入口文件（Entry chunk）添加runtime，来标识着从该文件开始查找依赖并执行； 一个入口文件（Entry chunk）包含runtime和一系列初始化模块；如果入口文件包含模块0，则运行时执行它。如果不包含，它等待包含模块0的块并执行它。 一个页面只能包含一个runtime，即只能包含一个入口文件（可以通过Optimization来提取入口文件中的公用runtime，实现多入口点）； Normal chunk一个普通的chunk不包含runtime，只是code splitting分割出来的依赖模块打成的包；如上文中的： 示例： require.ensure(["module-a", "module-b"], function() { var a = require("module-a"); // ... //该模块被require.ensure()后会打包成normal chunk。 }); Initial chunk (non-entry) Initial chunk是normal chunk的一种； 它是通过Optimization优化（CommonsChunkPlugin）得到的； 它被计入初始化时间； Running multiple entry points 一个Page只能包含一个runtime（webpack打包时生成的Header）； CommonsChunkPlugin在参数不指定Chunks的时候plugins: [ new webpack.optimize.CommonsChunkPlugin("init.js") ]，会提取所有chunks公共部分生成一个chunk（CommonsChunkPlugin必然提取了所有entry chunks中的runtime，则其它entry chunks不含runtime，从而变成了initial chunks ）； 对于大型Web应用程序，在开发过程中可能会产生太多小型的Chunks，这样会造成更大的HTTP开销，此时，需要考虑Chunks优化； Optimization压缩代码 new webpack.optimize.UglifyJsPlugin() 针对Chunks优化 在编写和打包代码时，你可能会注意到，有太多太小的Chunks，会产生更大的HTTP开销，此时，可以考虑如下的优化： 限制最大chunk数量：new webpack.optimize.LimitChunkCountPlugin({maxChunks: 15}) 限制最小chunk大小：new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000}) 以上是参考webpack1的版本进行的说明，2的版本还没有关注，尽请见谅；]]></content>
</entry>
</search>