通过weui-1.1.3源码学习前端开发（一）解析package.json文件

想在微信公众号上开发一个小的应用，找到了weui，顺便看看它的源代码，也算是学习前端开发了。

先看一下weui-1.1.3的源程序目录结构。

weui的目录结构

 

首先看看package.json文件，说明这是一个可以使用NPM进行管理的JS软件包（模块module）

看一下npm网站（https://www.npmjs.com/）对npm的定义：

npm is the package manager for JavaScript and the world’s largest software registry.

可见npm是：

1. 一个网站，就是前面提到用于搜索 JS 模块的网站：https://www.npmjs.com/；
2. 一个软件仓库（software registry），保存着人们分享的 JS 模块的大数据库；
3. 命令行里的客户端（JS包管理工具the package manager for JavaScript），安装node.js的时候会顺便安装上，开发者使用它来管理、安装、发布JS模块；

这里描述，包(package)和模块(module)基本是一个意思，具体的语境下可以稍作区分；

熟悉JAVA的同学，可以很自然的想到maven，maven就是JAVA程序的软件包管理工具，软件包仓库（https://mvnrepository.com/），和命令行工具mvn

下面看看package.json文件，其实就是一个JSON文件，对软件包进行了描述

package.json文件

npm包的描述文件，

在目录下面直接运行npm install命令

运行 npm install 后，它会查找package.json文件中列出的依赖包，然后下载符合语义化版本规则的软件包。npm install 默认会安装 package.json 中 dependencies 和 devDependencies 里的所有模块。

• dependencies：在生产环境中需要用到的依赖
• devDependencies：在开发、测试环境中用到的依赖

从上面的package.json文件可以看出，weui生产环境不需要依赖其他包，因为weui就是一个css样式文件，开发环境主要依赖autoprefixer，browser-sync，postcss-discard-comments，yargs，gulp

gulp后面再详细学习，先看看其他几个软件包的功能

autoprefixer：是专门用来添加厂商前缀的postcss插件，它处理兼容性的依据来源于caniuse，可以在多种构建工具中使用，如webpack、grunt、glup等；

CSS的厂商属性前缀

在CSS属性能中，常常能看到-webkit-，-moz-之类的前缀，这种就叫做浏览器私有前缀，是浏览器对于新CSS属性的一个提前支持。

-moz-代表firefox浏览器私有属性，moz代表的是Firefox的开发商Mozilla

-ms-代表ie浏览器私有属性

-webkit-代表safari、chrome私有属性

-o-代表Opera浏览器私有属性

为什么要有私有前缀呢？因为制定HTML和CSS标准的组织W3C动作是很慢的。通常，有w3c组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但是w3c不会为这个属性制定标准，而是要走很复杂的程序，经过很多审查。而浏览器商不愿意等那么久，他们觉得一个属性已经够成熟了，就会在浏览器中加入支持。但是避免日后w3c公布标准时有所变更，就会加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性，等到日后w3c公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。比方说，Chrome 10是不认border-radius这种写法的，只能用webkit-border-radius，而Chrome12就能认了。于是在写CSS的时候，这样写就能确保Chrome10和Chrome12浏览网页的时候都能够正确显示。

编译前

.example {

display: flex;

transition: all .5s;

user-select: none;

background: linear-gradient(to bottom, white, black);

}

编译后：

.example {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-transition: all .5s;

transition: all .5s;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

background: -webkit-linear-gradient(top, white, black);

background: linear-gradient(to bottom, white, black);

}

在gulp中，可以安装npm包gulp-postcss来启用Autoprefixer。

var gulp = require('gulp');

gulp.task('autoprefixer', function () {

var postcss = require('gulp-postcss');

var autoprefixer = require('autoprefixer');

return gulp.src('./postcss/*.css')

.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))

.pipe(gulp.dest('./dist/postcss'));

});

 

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。

yargs：让node.js程序可以添加参数

#!/usr/bin/env node

var argv = require('yargs').argv;

if (argv.l == 'zh-cn') {

console.log('Chinese site!');

}else if(argv.l == 'en') {

console.log('English website!');

}

//app.js文件，linux下的可执行脚本，chmod 755 app.js，可以直接在命令行下执行

 

$ ./app.js --l=zh-cn Chinese site! $ ./app.js --l=en English website!

 

最后看一下package.json的scripts部分，描述的是npm支持的脚本命令；

 npm run 命令 可以直接运行 package.json 中 scripts 指定的脚本，npm run 是 npm run-script 的缩写。
npm run 会创建一个Shell，执行指定的命令，并临时将node_modules/.bin加入PATH 变量，这意味着本地模块可以直接运行。
可以看到当前的package.json支持start和test两个命令。
npm run start会执行gulp -ws
npm run test会执行gulp release
启动gulp进行构建。
下面就要看看程序的构建过程了，weui使用的构建工具是gulp