Vue.js60分钟browserify项目模板快速入门 - keepfool(2)_H5之家

打开index.html文件，注意它所引用的build.js文件并不存在，后面我会告诉你dist/build.js文件是如何生成的。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>my-browserify-simple-demo</title> </head> <body> <app></app> <script src="dist/build.js"></script> </body> </html>

文件树结构如下：

├─.babelrc // babel配置文件 ├─.gitignore ├─index.html // 主页 ├─package.json // 项目配置文件 ├─README.md ├─dist // 发布目录 │ ├─.gitkeep ├─src // 开发目录 │ ├─App.vue // App.vue组件 │ ├─main.js // 预编译入口

这里要特别说明两个文件：package.json和.babelrc文件。

package.json

有很多初学者看到package.json文件就会头痛，这个文件到底是啥玩意儿，一堆看不懂的东西。

{ "name": "my-browserify-simple-demo", "description": "A Vue.js project", "author": "keepfool <crmug@outlook.com>", "scripts": { "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js", "serve": "http-server -c 1 -a localhost", "dev": "npm-run-all --parallel watchify serve", "build": "cross-env NODE_ENV=production browserify src/main.js | uglifyjs -c warnings=false -m > dist/build.js" }, "dependencies": { "vue": "^1.0.0" }, "devDependencies": { "babel-core": "^6.0.0", "babel-plugin-transform-runtime": "^6.0.0", "babel-preset-es2015": "^6.0.0", "babel-preset-stage-2": "^6.0.0", "babel-runtime": "^6.0.0", "cross-env": "^1.0.6", "babelify": "^7.2.0", "browserify": "^12.0.1", "browserify-hmr": "^0.3.1", "http-server": "^0.9.0", "npm-run-all": "^1.6.0", "uglify-js": "^2.5.0", "vueify": "^8.5.2", "watchify": "^3.4.0" }, "browserify": { "transform": [ "vueify", "babelify" ] } }

package.json文件是项目配置文件，除了项目的一些基本信息外，有3个重要的节点我说明一下：

dependencies：项目发布时的依赖

devDependencies：项目开发时的依赖

scripts：编译项目的一些命令

.babelrc文件

.babelrc文件定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。

{ "presets": ["es2015", "stage-2"], "plugins": ["transform-runtime"] }

为什么要将ES6转换为ES5呢？因为我们将使用ES6的一些语法来编写.vue组件，而有些浏览器目前还没有全面支持ES6。

babel是一个非常有名的ES6转码器，babel主页：https://babeljs.io/

3. 安装依赖

执行以下命令安装项目依赖：

cd my-browserify-simple-demo npm install

安装完成后，目录下会产生一个node_modules文件夹。

项目相关的依赖都存放在这个文件夹下了。

4. 运行示例

执行以下命令运行示例：

npm run dev

在执行该命令后，dist目录下会生成一个build.js文件。

打开127.0.0.1:8080，可以看到以下画面：

注意：之前我使用的node是4.4.5的版本，执行这个命令会出现一个错误：cann't find module vue-hot-reload api..，我将node.js升级到6.3.0版本后，删除node_modules文件夹，然后再次执行npm install命令重新安装依赖以后，该问题就解决了。

5. 编译过程说明

build.js文件是怎么产生的呢？我们把它分为两种情况：

开发时生成build.js

发布时生成build.js

何为开发时和发布时？开发过.NET童鞋，可以简单的理解为debug模式和release模式。

开发时成成build.js

在package.json文件的scripts节点下，有3行配置：

"scripts": { "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js", "serve": "http-server -c 1 -a localhost", "dev": "npm-run-all --parallel watchify serve" }

npm run dev命令执行的是dev节点对应的命令npm-run-all --parallel watchify serve ，这行命令是依赖于watchify的，也就是下面这行命令：

watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js

你不用纠结这行命令的每个参数是什么意思，只需要理解src/main.js –o dist/build.js的含义：

编译src/main.js文件，然后输出到dist/build.js

serve节点的命令http-server -c 1 -a localhost用于开启http-server，http-server是一个简易的web服务器。
下面这幅流程图描述了这个编译过程：