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

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

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

首先看看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是：

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

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

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

下面看看package.json文件，其实就是一个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 nodevar 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

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

通过weui-1.1.3源码学习前端开发（三）从example看起-src/index.html文件
通过weui-1.1.3源码学习前端开发(三)从example看起前面已经看过了gulp的构建文件gulpfile.js,下面我们就从weui提供的一个example开始看看吧先看看src/exa ...
博通Broadcom SDK源码学习与开发1——SDK源码探究与Cable Modem 系统编译
声明:原创作品,严禁用于商业目的. 本系列文章将全面剖析以Bcm33xxx芯片开发Cablemodem产品的SDK源码为例,从编译系统到各个功能模块进行分析与探讨. 文章目录 0.写在前篇 1. 博通 ...
博通Broadcom SDK源码学习与开发3——Cable Modem Docsis3.0
声明:原创作品,严禁用于商业目的. 本系列文章将全面剖析以Bcm33xxx芯片开发Cablemodem产品的SDK源码为例,从编译系统到各个功能模块进行分析与探讨. 文章目录 0.写在前篇 1. Ch ...
博通Broadcom SDK源码学习与开发2——Bootloader功能和编译过程
声明:原创作品,严禁用于商业目的. 本系列文章将全面剖析以Bcm33xxx芯片开发Cablemodem产品的SDK源码为例,从编译系统到各个功能模块进行分析与探讨. 文章目录 0.写在前篇 0.写在前 ...
博通Broadcom SDK源码学习与开发10——Cable Modem IPv6地址
声明:原创作品,严禁用于商业目的. 本系列文章将全面剖析以Bcm33xxx芯片开发Cablemodem产品的SDK源码为例,从编译系统到各个功能模块进行分析与探讨. 文章目录 0.写在前篇 1. 相关 ...
博通Broadcom SDK源码学习与开发4——ECOS系统数据流
声明:原创作品,严禁用于商业目的. 本系列文章将全面剖析以Bcm33xxx芯片开发Cablemodem产品的SDK源码为例,从编译系统到各个功能模块进行分析与探讨. 文章目录 0.写在前篇 1. SD ...
博通Broadcom SDK源码学习与开发5——ECOS系统层剖析
声明:原创作品,严禁用于商业目的. 本系列文章将全面剖析以Bcm33xxx芯片开发Cablemodem产品的SDK源码为例,从编译系统到各个功能模块进行分析与探讨. 文章目录 0.写在前篇 1. Op ...
博通Broadcom SDK源码学习与开发12终结篇——TR069网管协议
声明:原创作品,严禁用于商业目的. 本系列文章将全面剖析以Bcm33xxx芯片开发Cablemodem产品的SDK源码为例,从编译系统到各个功能模块进行分析与探讨. 文章目录 0.写在前篇 1. TR ...
博通Broadcom SDK源码学习与开发11——Cable Modem DHCP管理
声明:原创作品,严禁用于商业目的. 本系列文章将全面剖析以Bcm33xxx芯片开发Cablemodem产品的SDK源码为例,从编译系统到各个功能模块进行分析与探讨. 文章目录 0.写在前篇 1. DH ...

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

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

最新文章

热门文章