luqin / blog Goto Github PK

View Code? Open in Web Editor NEW

64.0 8.0 11.0 1.39 MB

My blog

Home Page: https://github.com/luqin/blog/issues

blog's Introduction

blog

https://github.com/luqin/blog/issues

blog's People

Stargazers

Watchers

Forkers

derk shineit nice2meu buaalixg jsdami macc6579 roselind freefly801213 jackeasons guojunwang favorer

blog's Issues

CNPM 使用文档

如何搭建私有 NPM 仓库请移步：CNPM 搭建私有 NPM 服务

本地 CNPM 服务地址：

* http://myip:7001       # registry
* http://myip:7002       # web

安装 CNPM

$ npm install -g cnpm --registry=https://r.cnpmjs.org

修改 CNPM 默认仓库地址

$ cnpm set registry http://myip:7001

登录私有仓库

$ cnpm login
Username: myname
Password: ***
Email: (this IS public) [email protected]

发布私有 package

Private package should be a scoped package

$ cd /tmp
$ mkdir helloworld && cd helloworld
$ cnpm init
name: (helloworld) @my-company-name/helloworld
version: (1.0.0)

{
  "name": "@my-company-name/helloworld",
  "version": "1.0.0",
  "description": "my first scoped package",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

$ cnpm publish
+ @my-company-name/[email protected]

查看私有 package

$ # 浏览器访问 http://myip:7002/@my-company-name/helloworld

或者使用 cnpm info

$ cnpm info

安装 package

$ cnpm install [name]

同步 package

直接通过 sync 命令马上同步一个模块, 只有 cnpm 命令行才有此功能:

$ cnpm sync jquery

当然, 你可以直接通过 web 方式来同步: /sync/jquery

管理 package owner

npm owner ls 
npm owner add  # 增加 owner 
npm owner rm # 删除

Genymotion

注册账号
下载地址：https://www.genymotion.com/download/
配置模拟器

[React Native][Windows] 构建 React Native Android

本文包含了在 Windows 系统中构建 React Native Android 应用和运行官方示例。

参考：在Windows下搭建React Native Android开发环境

另外需要安装 Android NDK，配置环境变量 ANDROID_NDK，下载地址：http://developer.android.com/ndk/downloads/index.html

模拟器

安装Genymotion，点击 Settings：

选择ADB，=>Use custom Android SDK tools，选择SDK的路径：

启动一个模拟手机设备，在 DOS 窗口中：adb devices，应该能看到手机设备在运行。

React Native Package Manager

https://github.com/rnpm/rnpm

安卓调试

打开 Chrome，访问 http://localhost:8081/debugger-ui，应当能看到一个页面。按F12打开开发者菜单。

在模拟器或真机菜单中选择Debug JS，即可开始调试。

运行官方 Examples

Mac/Linux

./gradlew :Examples:Movies:android:app:installDebug
# Start the packager in a separate shell (make sure you ran npm install):
./packager/packager.sh
# Open the Movies app in your emulator

Windows

gradlew :Examples:Movies:android:app:installDebug
:: gradlew :Examples:UIExplorer:android:app:installDebug
:: Start the packager in a separate shell (make sure you ran npm install):
cmd /c call "packager/launchPackager.bat"
:: Open the app in your emulator

生成已签名的APK

SASS 变量覆盖

/*1*/
$a: 1px !default;
$a: 2px !default;
$a: 3px;
$a: 4px !default;
$a: 5px;

.a {
  width: $a;
}

/*2*/
$b: 1px !default;
$b: 2px !default;
$b: 3px !default;

.b {
  width: $b;
}

/*3*/
$c: 1px;
$c: 2px !default;
$c: 4px;
$c: 3px !default;

.c {
  width: $c;
}

output:

/*1*/
.a {
  width: 5px;
}

/*2*/
.b {
  width: 1px;
}

/*3*/
.c {
  width: 4px;
}

基于 npm/webpack/React/React-Router 的前端模块架构

前端工程——方案

webpack
ES6 Module + ES6 Module Loader + HTTP/2.0 + Others
ES6 Module + System.js + jspm
FIS

0 info it worked if it ends with ok
1 verbose cli [ 'D:\Program Files\nodejs\node.exe',
1 verbose cli 'D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'rebuild',
1 verbose cli 'node-sass' ]
2 info using [email protected]
3 info using [email protected]
4 info readInstalled object
5 verbose rebuild path, id [ 'D:\trainning\react\gallery-by-react\node_modules\node-sass',
5 verbose rebuild '[email protected]' ]
6 silly rebuild set [ 'D:\trainning\react\gallery-by-react\node_modules\node-sass' ]
7 info build D:\trainning\react\gallery-by-react\node_modules\node-sass
8 info lifecycle [email protected]preinstall: [email protected]
9 silly lifecycle [email protected]preinstall: no script for preinstall, continuing
10 info linkStuff [email protected]
11 silly linkStuff [email protected] has D:\trainning\react\gallery-by-react\node_modules as its parent node_modules
12 verbose linkBins [email protected]
13 verbose link bins [ { 'node-sass': 'bin/node-sass' },
13 verbose link bins 'D:\trainning\react\gallery-by-react\node_modules.bin',
13 verbose link bins false ]
14 verbose linkMans [email protected]
15 verbose rebuildBundles [email protected]
16 verbose rebuildBundles [ '.bin',
16 verbose rebuildBundles 'async-foreach',
16 verbose rebuildBundles 'chalk',
16 verbose rebuildBundles 'cross-spawn',
16 verbose rebuildBundles 'gaze',
16 verbose rebuildBundles 'get-stdin',
16 verbose rebuildBundles 'in-publish',
16 verbose rebuildBundles 'lodash.assign',
16 verbose rebuildBundles 'lodash.clonedeep',
16 verbose rebuildBundles 'meow',
16 verbose rebuildBundles 'mkdirp',
16 verbose rebuildBundles 'nan',
16 verbose rebuildBundles 'node-gyp',
16 verbose rebuildBundles 'npmlog',
16 verbose rebuildBundles 'request',
16 verbose rebuildBundles 'sass-graph' ]
17 info lifecycle [email protected]install: [email protected]
18 verbose lifecycle [email protected]install: unsafe-perm in lifecycle true
19 verbose lifecycle [email protected]install: PATH: D:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\trainning\react\gallery-by-react\node_modules\node-sass\node_modules.bin;D:\trainning\react\gallery-by-react\node_modules.bin;C:\windows\system32;C:\windows;C:\windows\System32\Wbem;C:\windows\System32\WindowsPowerShell\v1.0;C:\Program Files\Java\jdk1.7.0_79\bin;C:\Program Files\Java\jdk1.7.0_79\jre\bin;D:\Program Files\MySQL\MySQL Server 5.5\bin;D:\Java\apache-maven-3.3.9\bin;D:\Program Files\TortoiseGit\bin;D:\Java\apache-tomcat-8.5.4\bin;D:\Program Files\nodejs;C:\Users\wb-lyn227583\AppData\Roaming\npm
20 verbose lifecycle [email protected]install: CWD: D:\trainning\react\gallery-by-react\node_modules\node-sass
21 silly lifecycle [email protected]install: Args: [ '/d /s /c', 'node scripts/install.js' ]
22 silly lifecycle [email protected]install: Returned: code: 0 signal: null
23 info lifecycle [email protected]postinstall: [email protected]
24 verbose lifecycle [email protected]postinstall: unsafe-perm in lifecycle true
25 verbose lifecycle [email protected]postinstall: PATH: D:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\trainning\react\gallery-by-react\node_modules\node-sass\node_modules.bin;D:\trainning\react\gallery-by-react\node_modules.bin;C:\windows\system32;C:\windows;C:\windows\System32\Wbem;C:\windows\System32\WindowsPowerShell\v1.0;C:\Program Files\Java\jdk1.7.0_79\bin;C:\Program Files\Java\jdk1.7.0_79\jre\bin;D:\Program Files\MySQL\MySQL Server 5.5\bin;D:\Java\apache-maven-3.3.9\bin;D:\Program Files\TortoiseGit\bin;D:\Java\apache-tomcat-8.5.4\bin;D:\Program Files\nodejs;C:\Users\wb-lyn227583\AppData\Roaming\npm
26 verbose lifecycle [email protected]postinstall: CWD: D:\trainning\react\gallery-by-react\node_modules\node-sass
27 silly lifecycle [email protected]postinstall: Args: [ '/d /s /c', 'node scripts/build.js' ]
28 silly lifecycle [email protected]postinstall: Returned: code: 1 signal: null
29 info lifecycle [email protected]~postinstall: Failed to exec postinstall script
30 verbose stack Error: [email protected] postinstall: node scripts/build.js
30 verbose stack Exit status 1
30 verbose stack at EventEmitter. (D:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
30 verbose stack at emitTwo (events.js:106:13)
30 verbose stack at EventEmitter.emit (events.js:191:7)
30 verbose stack at ChildProcess. (D:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
30 verbose stack at emitTwo (events.js:106:13)
30 verbose stack at ChildProcess.emit (events.js:191:7)
30 verbose stack at maybeClose (internal/child_process.js:877:16)
30 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
31 verbose pkgid [email protected]
32 verbose cwd D:\trainning\react\gallery-by-react
33 error Windows_NT 6.1.7601
34 error argv "D:\Program Files\nodejs\node.exe" "D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "rebuild" "node-sass"
35 error node v6.8.1
36 error npm v3.10.8
37 error code ELIFECYCLE
38 error [email protected] postinstall: node scripts/build.js
38 error Exit status 1
39 error Failed at the [email protected] postinstall script 'node scripts/build.js'.
39 error Make sure you have the latest version of node.js and npm installed.
39 error If you do, this is most likely a problem with the node-sass package,
39 error not with npm itself.
39 error Tell the author that this fails on your system:
39 error node scripts/build.js
39 error You can get information on how to open an issue for this project with:
39 error npm bugs node-sass
39 error Or if that isn't available, you can get their info via:
39 error npm owner ls node-sass
39 error There is likely additional logging output above.
40 verbose exit [ 1, true ]

请教一下，遇到和楼上同样的问题

前端工程

前端工程——基础
 前端工程——工具
 前端工程——架构
 前端工程——流程
 前端工程——测试

前端工程——工具

NPM
ES2015+
React
Babel
webpack/System.js
gulp
SASS
Autoprefixer
ESLint

测试：

Mocha
Karma
Karma-coverage 单元测试覆盖率
PhantomJS

基于 NPM 的大型 React 单页应用探索（多场景多方案）

未完待续……

本文目标构建基于 NPM 的大型 React 单页应用（以及多页面），支持多模块协同开发、分布式构建与发布。

React
React Router
Redux...
webpack
ES2015+/JSX with babel

JavaScript 规划

首先初始化顶层目录结构：

app/
config/
package.json
README.md
... and tons of project .dotfiles and tool files ...

按文件类型组织 File-Type First (FTF)

app/
  reducers/
    root.js
    memberships.js
  components/
    home.jsx
    memberships.jsx
  ... of course more type folders/ ...

按功能组织 Feature First (Pods)

app/
  authentication/
    api/
    components/
    helpers/
    ...
  comments/
    actions/
    api/
    components/
    reducers/
    stores/
    ...
  ...

可以像这样按功能分组：

app/
  settings/
    profile/
    notifications/
  ...

那么通用文件如何放置呢？一个方案是将他们放入框架文件夹：

app/
  flux/
    apiUtils.js
    baseActions.js
    baseStore.js
    connectToStores.js

多 App 模式 Multiple Apps

app/
  kapost.jsx
  studio/
    studioEntry.jsx
    content/
    ...
  gallery/
    galleryEntry.jsx
    collections/
    ...
  insights/
    insightsEntry.jsx
    content-scoring/
    ...
  members/
    membersEntry.jsx
    profile/
    ...

依然有很多通用代码，可以放入通用文件夹：

app/
  ...
  shared/
    users/
    ui/
      dropdowns/
      ...
    ...

到目前为止，按功能组织模式仍然可以 hold 住，我们可以在每个 App 使用按文件类型组织模式，但是依然有缺点，仅仅适合单 App 模式。

面对疯狂增长的 routes 或者 reducers，还有一种优雅的方式是使用代码分包（code-splitting），例如动态加载 React Router 和动态增加 Redux reducers，那么我们如何组织这些文件呢？我们可以定义一个顶级文件夹 boot/，一个项目文件夹例如 kapost/。

app/
  kapost/
    routes.jsx (holds and rolls up all other app routes dynamically)
    reducer.js (holds all reducers dynamically)
  studio/
    studioEntry.jsx
    app/
      routes.jsx (rolls up all application routes)
      reducers.jsx (rolls up all studio reducers across all the feature folders)
    ...
  ...

……

Application Organization

API

同构 Universal Rendering

Domains and Authentication

JSON Web Tokens
Secure cookies over HTTPS (under one primary domain name)

App Configuration

Assets

webpack dev server

Styles

CSS 方案：

SASS
LESS
Inline Style
PostCSS
CSS Modules

构建工具：

本文基于 SASS 实现模块化方案。

Without webpack and inlining

每个项目的样式文件目录：

studio/
  app/
  config/
  stylesheets/
  spec/
  package.json
  ...

每个样式文件通过命名空间来实现模块化，根据组件确定前缀：

studio/
  app/
    comments/
      commentEntry.jsx
  stylesheets/
    comments/
      _commentEntry.scss

// _commentEntry.scss
.studio-comment-entry-component {
  // my name-spaced styles
}


// commentEntry.jsx#render
render() {
  <div className="studio-comment-entry-component">...</div>
}

共享的样式可以放入 shared/ 目录，全局样式可以放入类似 stylesheets/app/ 的目录（使用命名空间）。

每个 app 都负责引入所有功能模块的样式文件，顶层 app 负责引入所有子 app 的样式文件。如果分离一些 apps 到分离的代码仓库，可以共享相同的构建流程，只需要维护相同的构建配置。

With webpack and inlining

studio/
  app/
    comments/
      styles/
        individualComponentStylesheet.scss
      ...

Why You Shouldn’t Style React Components With JavaScript

Testing

studio/
  app/
    comments/
      components/
      commentsContainer.jsx
      specs/
        components/ (unit tests of sorts)
        integration/ (testing entire comment feature)
        commentsContainerSpec.jsx (container could even be the main integration test)
        ...
      ...

基于 NPM 的协同开发方案

私有 NPM 方案：

NPM 分包：

@kapost/app
@kapost/studio
@kapost/gallery
@kapost/insights
...

module/
  ...
  assets
  dist
  js
  scss
  test
  tools
  routes.jsx
  package.json

……

分布式编译

gulp + webpack + babel
gulp + System.js + babel

参考：

webpack 集成 ECharts 实现按需 require

安装

npm i echarts --save

Usage

import echarts from 'echarts';
import 'echarts/chart/wordCloud';

let mychart = echarts.init(dom);
let charCloudOption = {...};
mychart.setOption(charCloudOption);

完整示例地址：https://github.com/luqin/echarts-webpack-starter-kit

前端工程——架构

webpack
ES6 Module + ES6 Module Loader + HTTP/2.0 + Others
ES6 Module + System.js + jspm
FIS

前端工程——基础

本文整理自：张云龙前端工程系列blog

前端是一种技术问题较少、工程问题较多的软件开发领域。

当我们要开发一款完整的Web应用时，前端将面临更多的工程问题，比如：

大体量：多功能、多页面、多状态、多系统；
大规模：多人甚至多团队合作开发；
高性能：CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载、同步/异步加载、移动端首屏CSS内嵌、HTTP 2.0服务端资源推送。

前端领域有哪些技术元素

前端行业经历了这么长时间的发展，技术元素非常丰富，这里列举出一般web团队需要用到的技术元素：

开发规范：包括开发、部署的目录规范，编码规范等。
模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。是提升前端开发效率的重要基础。
组件化开发：在模块化基础上，以页面小部件(component)为单位将页面小部件的js、css、html代码片段放在一起进行开发、维护，组件单元是资源独立的，组件在系统内可复用。比如头部(header)、尾部(footer)、搜索框(searchbar)、导航(menu)、对话框(dialog)等，甚至一些复杂的组件比如编辑器(editor)等。通常业务会针对组件化的js部分进行必要的封装，解决一些常见的组件渲染、交互问题。
组件仓库：共享组件、方便复用、管理组件依赖。（暂定npm）
性能优化：这里的性能优化是指能够通过工程手段保证的性能优化点。由于其内容比较丰富，就不在这里展开了，感兴趣的同学可以阅读这两篇文章 [1] [2]。性能优化是前端项目发展到一定阶段必须经历的过程。这部分我想强调的一点是性能优化一定是一个工程问题和统计问题，不能用工程手段保证的性能优化是不靠谱的，优化时只考虑一个页面的首次加载，不考虑全局在宏观统计上的优化提升也是片面的。
- 按需加载
- 同步/异步加载
- 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
- 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化
- 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
- 代码校验：避免CSS表达式，避免重定向
项目部署：部署按照现行业界的分工标准，虽然不是前端的工作范畴，但它对性能优化有直接的影响。合理的静态资源资源部署可以为前端性能带来较大的优化空间。
- 缓存复用（静态资源缓存）：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存。参考文章：缓存控制
- 文件指纹（非覆盖式发布）
开发流程：完整的开发流程包括本地开发调试、视觉效果走查确认、前后端联调、提测、上线等环节。对开发流程的改善可以大幅降低开发的时间成本。
- 支持多模块、多仓库、多团队协作开发
- 支持定制项目开发（定制模块，个性化）
- 本地开发调试
- 前后端联调
- 提测
- 上线
开发工具：这里说的工具不是指IDE，而是工程工具。前端开发需要工具支持，这个问题的根本原因来自前端领域语言特性。前端开发所使用的语言（js、css、html）以及前端工程资源的加载与定位策略决定了前端工程必须要工具支持。前面提到的7项技术元素都直接或间接的对前端开发工具设计产生一定的影响，因此能否串联其他技术要素，使得前端开发形成一个连贯可持续优化的开发体系，工具的设计至关重要。
- 构建（分布式）与优化工具
- 开发-调试-部署等流程工具
- 组件库获取、提交等相关工具
- 文档平台工具
- 配置发布平台工具
以上8项，1-3是技术和业务相关的开发需求，4是技术沉淀与共享需求，5-8是工程优化需求。

组件化开发

参考

github上值得关注的前端项目

综合/资源

frontend-dev-bookmarks 一个巨大的前端开发资源清单。star:15000
front-end-collect 分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者。star:860
Front-end-Interview-questions 史上最全前端开发面试问题及答案
f2e-hub 包含Animation，UI，dialog，Carousels，color，image，workflow等。star:100
awesome-javascript 一系列很棒的javascript 库，资源。star:3100
fks 前端技能汇总，包含前端知识架构，后端知识，linux，书籍推荐等。star:4000
node123 node.js中文资料导航。star:1200
mobile-web-favorites 移动端web开发收藏夹。star:200

样式/UI

Semantic-UI 让你使用任何HTML标签来表现UI控件。
这是一款语义化设计的前端框架，为攻城师而制作的可复用的开源前端框架。star:17500
primer CSS风格指南。star:3600

测试/工具

mocha 一个简单、灵活有趣的 JavaScript 测试框架，用于 Node.js 和浏览器上的 JavaScript 应用测试。 star:6680
csscss css代码冗余分析仪，用于分析冗余。star:2800
es6-tools es6 工具集，包括Grunt Tasks，Gulp Plugins，Broccoli Plugins，Brunch Plugins，Webpack plugins等等。star:1860
async 一个工具模块，提供了直接而强大的 JavaScript 异步功能。虽然是为 Node.js 设计的，但是它也可以直接在浏览器中使用。star:13000
simditor 团队协作工具 Tower 使用的富文本编辑器。star:1300
HTMLHint HTML 静态代码分析工具，可以集成到IDE环境或编译系统中。star:900
jshint js静态代码分析工具，可以帮你检测js语法错误和潜在的问题。star:5100
csslint 分析和优化你的CSS样式表的工具。由Nicholas C.
Zakas所写。star:2700

Workflow/构建工具

Grunt 基于Node.js的项目构建工具。拥有数量庞大的插件，是一款优秀的前端自动化工具。star:9500
yeoman 一个强健的工具，库，及工作流程的组合。star:960
gulp 基于node.js流的新一代前端构建系统。star:14000

canvas/数据可视化

echarts 基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。star:6900
Chart.js 使用<canvas>标签的简易HTML5图表。star:14600
sketch.js 跨平台JavaScript创意编码框架，gzip压缩后仅有2kb。star:1500
d3 一个基于数据操作文档的js数据可视化框架，最流行的可视化库之一。star:38000

模块管理/加载器

ESL 是一个浏览器端、符合AMD的标准加载器，适合用于现代Web浏览器端应用的入口与模块管理。

ESL vs RequireJS

体积更小 (Smaller)
性能更高 (Higher performance)
更健壮 (More Robustness)
不支持在非浏览器端使用 (Browser only)
依赖模块用时定义 (Lazy define)

seajs 一个遵循CommonJS规范的JavaScript模块加载器。提供简单、极致的模块化开发体验。star:4100

动画

animate.css 一个跨浏览器的CSS动画库。简单易用易上手。star:23000
move.js 极小的 JavaScript 库,支持 CSS3 的动画效果,非常简单优雅。star：2600
TweenJS 是一个简单但强大的 Javascript 动画库。CreateJS 套件的一部分。star:1500
bounce.js 一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript
库,使用其特有的方式生成的动画效果。star:3600

插件

zepto.fullpage 专注于移动端的全屏滚动插件。star:510
fullPage.js pc端的全屏滚动插件。 star:9500 view demo
onepage-scroll 可以轻松建立一个动感的响应式的滚动效果页面，比较适用于单页面的专题站。支持现代浏览器和IE8以上版本。View demo 。star:7700
slick 一款完全响应式的 jQuery 图片滚动插件，能够根据容器自动适应宽度。star:10000 view demo
superslides 致力于解决网站大部分特效展示问题。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！ view demo star:1100
jQuery-One-Page-Nav 当用户滚动网页时，实现平滑滚动和智能导航。star:1100
slider 一个jquery完全开源的JavaScript代码库，用户可以开发，调试和深度定制自己的滑块。star:850 view demo

框架、库和组件

polymer web组件构建框架。一套以“一切皆组件、最少化代码量、最少框架限制”为设计理念的Web UI框架。 star:9900
meteor 一个超简单的纯javascript web框架。用于自动化和简化实时运行的 Web 应用程序的开发。可直接在浏览器或者云平台中运行。 star:25300
impress.js 创建令人兴奋的演示。使用CSS3的转换和过渡，这个库允许你创建令人印象深刻的演示文稿。view demo。star:24300
ionic 先进的HTML5 移动端开发框架。帮助开发者使用HTML5, CSS3和js做出不可思议的hybrid app。star:17000
reveal.js 基于CSS3的3D幻灯片工具。能够制作绚丽的演示文稿并生成HTML格式，将它发布到web上。star:21500 view demo
Modernizr 用来检测浏览器功能支持情况的JavaScript库,可以检测18项CSS3功能以及40多项关于HTML5的功能。star:16000
pure.css 一组很小的，响应式的css组件，你可以在网页的项目上到处使用。star:12000
three.js 是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。star:20000
TimelineJS 轻松制作时间轴。star:8000
jquery-pjax 对ajax 和 pushState的封装，让你可以很方便的使用pushState技术，用以实现页面无刷新加载。star:11500
highlight.js javascript语法高亮。既可以运行在浏览器端也可以运行在服务端。star:5500
commander.js Node.js命令行工具。star:3800
togetherjs 由Mozilla打造的一款可以给网站添加实时协作功能的JavaScript库。star:5K
HTML.js 轻量级的简化与DOM操作的js库。view demo star:1.5K

MEAN.JS 全栈式javascript，使用MongoDB, Express, AngularJS和Node.js。star:2.2K

移动端

Swiper 加速移动触摸滑块与硬件之间的转换。star:5000。
hammer.js 一个支持多点触摸的手势库。star:11000
amDoc 无线Web解决方案 - 文档规范指南

Node.js相关

nodeclub 使用 Node.js 和 MongoDB 开发的社区系统。star:3000
N-chat 使用 Express + Socket.IO 搭建的多人聊天室。star:300
N-blog 使用 Express + MongoDB 搭建多人博客。star:1800
node-inspector 基于Blink开发者工具的Node.js调试器。star:7000
node-lessons：Node.js包教不包会。star:2.5K
nodePPT 使用nodejs写的网络幻灯片。可能是迄今为止最好的网页版PPT。star:1.6K view demo
hexo 一款快捷，简单，强大的博客框架，基于Nodejs。star:5.2K

React相关

react-style 是 React.js 可维护的样式组件
react-component 基于reactjs的组件。
react-native 一个用React构建native apps的框架。star:15000
react-native-guide 汇集了react-native学习资源与各类开源app。star:850
awesome-react 关于react的工具，资源，视频的集合。star:700

HTML5

Browserquest: Mozilla开发的HTML5多人在线游戏。star:5200
video.js 开源的HTML5和Flash视频播放器。支持自定义进度条、按钮以及工具栏的底色。star:9.1K

其他

javascript-style-guide 最合理的使用javascript的方法。 star:18000
Mars 腾讯移动Web前端知识库。star:1600
css3please 跨浏览器自动生成css3前缀
brackets 一款使用 HTML，CSS，JavaScript 创建的开源的针对 Web 开发的编辑器。star:23000
normalize.css 一个可定制的 CSS 文件，使浏览器呈现的所有元素，更一致和符合现代标准。支持IE8+。star:17000
Ghost Node.js开发最新博客系统, 简单简洁, 响应式设计, 支持完全自定义, 免费, 专注博客。star:16000
io.js 从NodeJS里分离出来的一条分支。star:13000
2048 游戏 view demo star:7000
jade 一款高性能简洁易懂的模板引擎。star:8500

高产大牛

Evan You 前端轻量级框架MVVM框架vue.js作者，前Google工程师。followers:1.6K
TJ Holowaychuk Koa、Co、Express、jade、mocha、node-canvas、commander.js 等知名开源项目的创建和贡献者。 followers:14.1K
PaulIrish 著名的前端开发工程师，同时他也是Chrome开发者关系团队成员，jQuery团队成员，Modernizr、Yeoman、CSS3 Please和HTML5 Boilerplate的lead developer。followers:15.7K
Mike Bostock 知名可视化库 D3.js的主要作者。followers:8.3K
Nicolas Gallagher Normalize.css 作者。followers:3.6K
司徒正美前端迷你MVVM框架Avalon作者。followers:2.1K

我的主页：http://segmentfault.com/u/trigkit4

node-sass 安装失败解决方案

参考

Binary configuration parameters

一、下载对应平台二进制文件

node-sass 3.4.2 版本二进制文件下载地址：https://github.com/sass/node-sass/releases/tag/v3.4.2
或者：https://github.com/sass/node-sass-binaries

二、设置环境变量

安装时执行：

set SASS_BINARY_PATH=文件地址

或者添加到系统环境变量：
设置变量 SASS_BINARY_PATH 为二进制文件地址，例如我的文件路径D:\dev\npm\node-sass\win32-x64-14_binding.node

三、检查

# for windows
echo %SASS_BINARY_PATH%

CNPM 搭建私有 NPM 服务

参考：

Deploy a private npm registry in 5 minutes

Deploy

环境依赖

Linux
Node >= 0.12.2， use --harmony
NPM >= 2.7.6
PostgreSQL >= 9.4

下载代码

当前最新版本：2.0.0-rc.15

# clone from github
$ git clone git://github.com/cnpm/cnpmjs.org.git $HOME/cnpmjs.org
$ cd $HOME/cnpmjs.org

修改配置

$ vim config/config.js

module.exports = {
  bindingHost: '127.0.0.1', // only binding on 127.0.0.1 for local access

  // input your custom config here
  admin: {
    'admin': '***'
  },

  /**
   * database config
   */

  database: {
    db: 'cnpmjs',
    username: 'postgres',
    password: '',

    // the sql dialect of the database
    // - currently supported: 'mysql', 'sqlite', 'postgres', 'mariadb'
    dialect: 'postgres',

    // custom host; default: 127.0.0.1
    host: '127.0.0.1',

    // custom port; default: 3306
    port: ***,

    // use pooling in order to reduce db connection overload and to increase speed
    // currently only for mysql and postgresql (since v1.5.0)
    pool: {
      maxConnections: 10,
      minConnections: 0,
      maxIdleTime: 30000
    },

    logging: !!process.env.SQL_DEBUG,
  },

  // registry scopes, if don't set, means do not support scopes
  scopes: ['@mycnpm']
};

安装依赖

# install dependencies
$ make install

创建数据库

# 创建数据库：cnpmjs

初始化数据库

$ node --harmony models/init_script.js

启动服务

$ npm run start

For Windows: node --harmony dispatch.js

后台进程启动

nohup node --harmony /root/cnpmjs.org/dispatch.js > /root/cnpmjs.org/startlog.log 2>&1 &

关闭后台进程

ps -ef | grep node
kill -9 pid

检查

#open registry and web
# registry
http://myip:7001
# web
http://myip:7002

注册自启动

cd /root/cnpmjs.org/
vi start.sh

输入脚本保存：

nohup node --harmony /root/cnpmjs.org/dispatch.js > /root/cnpmjs.org/startlog.log 2>&1 &

增加软链接：

ln -s start.sh /etc/init.d/cnpm

CNPM 使用文档

webpack stats 分析工具 analyse

http://webpack.github.io/analyse/

使用方式：

webpack --json > stats.json

plugins:

function () {
    this.plugin('done', function (stats) {
        let jsonStats = stats.toJson();
        require('fs').writeFileSync(path.join(constants.BUILD_DIR, 'stats.json'), JSON.stringify(jsonStats));
    });
}

老大：set SASS_BINARY_PATH

两个问题:
安装使用yeoman快速搭建react-webpack开发环境【http://blog.csdn.net/stayhungry_/article/details/51820457】

1: 为啥是node-sass 下载失败，其他npm包不会出现这个情况

2：能否给小弟解释下这个配置是什么意思

set SASS_BINARY_PATH=文件地址
或者添加到系统环境变量：
设置变量 SASS_BINARY_PATH 为二进制文件地址，例如我的文件路径D:\dev\npm\node-sass\win32-x64-14_binding.node

国内开源项目看板

echarts
PNChart
amazeui
fis

webpack hot load css sourcemap 不生效解决方案

chrome 使用开发者工具查看 css sourcemap 对应文件地址会出现文件地址如blob:http%3A//localhost/e8ed58a7-16c9-484f-92f9-94b4afd6bb35的情况。

解决方案：重新打开开发者工具