JavaScriptNext - ES6 Syntax

packagecontrol.io
github.com

Better JavaScript language definition for TextMate and SublimeText. This builds on the language files commonly used and adds more fine grained matching and also includes new features from ECMAScript 6 like modules, succinct methods, arrow functions, classes, generators, and accessors (ES5).

FileSync

packagecontrol.io
github.com

What is this?

SublimeFileSync is a plugin for the text editor SublimeText 2 and 3 providing an easy way to synchronise files between different locations.

The main goal is to keep files outside of Sublime Text projects in-sync with Sublime Text project files. The plugin works as an EventListener and will synchronise any matching files as soon as you save it.

Be aware that the synchronisation is only in one direction, from sublime Text to the outside world.

config

{
    "mappings": [{
        "source": "/Users/source/", //Unix style paths
        "destination": "/Users/destination/",
        "exclude_pattern_list": ["*.bak"] //exclude files
    }]
}

Local History

packagecontrol.io
homepage

A Sublime Text 2/3 plugin for maintaining local history of files. [backup | open | compare | incremental diff]

TodoReview

packagecontrol.io
github.com

A SublimeText plugin for reviewing todo (and other) comments within your code.

Terminal

packagecontrol.io

Launch terminals from the current file or the root project folder

keybinding

[
    { "keys": ["super+shift+t"], "command": "open_terminal" },
    { "keys": ["super+shift+alt+t"], "command": "open_terminal_project_folder" }
]

DocBlockr

packagecontrol.io
github.com

DocBlockr is a package for Sublime Text 2 & 3 which makes writing documentation a breeze. DocBlockr supports JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ and Rust.

注释和共享

Markdown Plus

前言

demo 地址: https://github.com/yy8597/webpack-demos

之前学习了 broswerify,发现确实很好用。虽然没有 grunt 那样丰富的配置和插件,但就是觉得“恩!这就是我想要的结构”。
webpack 感觉就是 broswerify 的进阶版,怎么说呢:

  • 有更多可配置内容
  • 比起 broswerify 一股脑得打成单包更智能。

官方介绍

安装

1
npm install webpack -g

-g 方便我们在命令行直接使用 webpack

使用

基本命令 demo1

首先建立两个文件

1
2
3
4
5
6
7
8
9
10
11
12
//entry.js
document.write("It works.");

//index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

执行 webpack

1
$ webpack ./entry.js bundle.js

生成 bundle.js,然后打开 index.html 就可以看到

It works.

添加依赖 demo2

增加一个文件

//content.js
module.exports = "It works from content.js.";

我们修改 entry.js 加载 content.js 的内容

//document.write("It works.");
document.write(require("./content.js"));

同样执行

$ webpack ./entry.js bundle.js

在浏览器中看到

It works from content.js.

done~

webpack 分析你的入口文件(entry.js)所依赖的其他文件(模块),这些文件都会被打包到 bundle.js中。webpack 会分配给每个模块一个唯一的 Id,在 bundle.js 中通过这个 Id 来访问每个模块。在程序启动的时候只会处理入口模块(entry.js), require 方法会在执行时即时地处理依赖模块。

打包 css demo3

webpack 只能处理 javascript,要处理 css 就需要安装css-load来转换 css 为 js,还要安装style-loader 将转换后的 css 加载到 dom 中。

WHAT ARE LOADERS?

1
$npm install css-loader style-loader --save

接着增加 css 文件

1
2
3
body {
background: yellow;
}

修改 entry.js,然后就能看到效果

1
2
require("!style!css!./style.css");
document.write(require("./content.js"));

同样执行

$ webpack ./entry.js bundle.js
It works from content.js.

通过 “!style!css!” 这样的前缀,可以把文件进行一系列的转化,最终变成 javascript 的一个模块。

命令行绑定 loaders

如果我们不想写过长的 require : require(“!style!css!./style.css”);,简化为require(“./style.css”)
或者我们喜欢灵活定制 css 文件的转化方式。

修改 entry.js

1
2
3
//require("!style!css!./style.css");
require("./style.css");
document.write(require("./content.js"));

执行下面的命令:

1
$ webpack ./entry.js bundle.js --module-bind "css=style\!css"

官网说明在这有个错误,”css=style!css” 里面少了个反斜杠,原因是叹号在 bash 里有特殊意义

It works from content.js.

添加 webpack.config.js demo4

理解了上面的 demo 以后,接下来我们就可以在项目根目录下新建一个webpack.config.js ,然后通过一句命令 $ webpack 就能打包我们的项目。

1
2
3
4
5
6
7
8
9
10
11
12
13
//webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};

webpack 命令会尝试读取同目录中的 webpack.config.js 文件。

And More

还可以通过一些参数使得打包过程可视化

$ webpack --progress --colors

–progress 打印打包日志
–colors -c 带颜色的日志(官方是这么描述的,但我没看到颜色…)

当然还有 watch 功能

$ webpack --progress --colors --watch

必须的要有 server

1
2
$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors

~ 完 ~

这里只是介绍了 webpack 基本的用法
demo 基本都是翻译自webpack/getting-started
更多详细和进阶的内容还是推荐去官网看看

参考

注释和共享

习惯了 seajs 的异步加载方式,也想着 angular 也能同样使用异步加载,但是事实不随人愿。

angularjs 和 requirejs 一样,使用的是预先加载的方式组织模块(这和 seajs 的懒加载正好相反),当一个单页面应用的模块越来越多时,也就意味着需要预加载的模块也会越来越多,这也许也就说明了 angular 更适合用来开发轻应用。


正式开始

路由我使用了angular-ui-router,模块加载器是 requirejs

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
//路由
{
state : 'login',
templateUrl : 'login/login.html',
controller : 'loginCtrl',
resolve: {
realCtrl : function ($q) {
var def = $q.defer();
require(['/features/login/login.js'], function (loginCtrl) {
def.resolve(loginCtrl)
});
return def.promise;
}
}
},

// 获得$controllerProvider
app.config(function($controllerProvider) {
app.registerController = $controllerProvider.register;
// ...
})

// loginControler
app.registerController('loginCtrl', function ($scope) {
// do something
});

参考

angular应用如何实现按需加载

注释和共享

升级你的 nodejs

发布在 nodejs

在学习 webpack 的时候遇到一个错误

1
2
3
...
Module build failed: ReferenceError: Promise is not defined
...

Promise 没定义???
怎么可能,es6快要到来的时代怎么能不支持 Promise!!!

然后测试了一下

1
$ node -e 'console.log(Promise)';

果然是 not define

好吧,应该是 node版本太旧,要升级了,随便百度了一下,npm 安装了 n

1
2
$ sudo npm install -g n
$ sudo n stable

等待,搞定

注释和共享

Github Repository API中说明了可以通过发送一个请求来认证,之后就能通过命令行自动新建远程仓库了。

认证

1
curl -u 'username' https://api.github.com/user/repos -d '{"name":"RepoName"}'
替换值 说明
username github 的用户名
RepoName 新建的仓库名

本地新建仓库

1
2
3
4
5
6
7
$ touch README.md
$ git init
$ git add *
$ git commit -m "first commit"
$ git remove add origin https://github.com/yourname/RepoName.git
$ git push -u origin master
//参数-u 以后就可以直接用不带参数的git pull从之前push到的分支来pull

注释和共享

  • 第 1 页 共 1 页

YanYang

Fuck IE6 every day!


Front End Engineer