Node.js, Npm
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 Node.js 的包管理器 npm,是全球最大的开源库生态系统。
ECMAScript5, ECMAScript6(Babel)
CommonJS, AMD(RequireJS), CMD(SeaJS)
用于解决Javascript模块化编程和加载
CommonJs是应用在NodeJs,是一种同步的模块机制。它的写法大致如下:
var firstModule = require("firstModule");
//your code...
module.export = anotherModule
AMD的应用场景则是浏览器,异步加载的模块机制。require.js的写法大致如下:
define(['firstModule'], function(module){
//your code...
return anotherModule
})
Webpack
## 初始化项目(项目中的各个依赖都是通过npm来管理,而npm对于我们项目的管理,则是通过package.json文件)
$ npm init
## 安装Webpack(其它相关依赖包也都通过npm进行安装管理,安装至项目的node_modeles目录中)
$ npm install --save-dev webpack
## 构造项目目录结构
$ tree -L 1
.
├── src # 源码目录,可以按mvc等模式进行结构分层
├── build # 通过webpack编译后的文件目录,最终通过该目录进行交付部署
├── dev-server.js # 通过node.js的web服务器框架express进行服务部署的入口脚本
├── node_modules # 通过npm安装的各依赖包的目录
├── package.json # 项目描述和包依赖管理配置
├── webpack.config.js # webpack配置
├── webpack.dev.config.js #
└── webpack.prod.config.js #
## 用于将打包后的js文件自动插入到html中
$ npm i html-webpack-plugin --save-dev
## 通过使用express构造web服务器并且使用中间件,可以达到不需要编译构建便可进行源码的效果查看
$ npm install express webpack-dev-middleware webpack-hot-middleware --save-dev
## css文件抽离插件
$ npm install extract-text-webpack-plugin --save-dev
Vue.js
VueJS官方基于webpack提供了两种项目模板,分别是vue-webpack-simple模板和vue-webpack模板。
基于该项目模板,会自动在项目中集成了webpack开发和打包的环境, 也就是上述提到的webpack的相关安装和使用过程可以暂时忽略掉,把更多精力投入到项目开发中。
## 安装完vue cli后,就可以基于vue-webpack-simple模板和vue-webpack模板创建项目了
$ npm install -g vue-cli
## 创建一个基于webpack-simple模板的项目,名称为my-webpack-simple-demo
$ vue init webpack-simple my-webpack-simple-demo
## 安装项目依赖
$ cd my-webpack-simple-demo
$ npm install
## 运行示例
$ npm run dev
## 发布
$ npm run build