【Web前端基础】webpack打包原理是什么？

【Web前端基础】webpack打包原理是什么？1、概念

node打包 node打包vue

node打包 node打包vue

本质上，webpack 基于node平台，利用 node 的各种api来实现 jascript 应用程序的一个静态模块的打包工具。

在打包过程中，构建依赖关系，并且实现模块引用预处理，以及缓存等。

2、分析

1、人口文件

// mian.js

const a = require('./m1')

const b= require('./m2'版的 node 支持版 ECMAScript 几乎所有特性，但有一个特性却一直到现在都还没有支持，那就是从 ES2015 开始定义的模块化机制。而现在我们很多项目都是用 es6 的模块化规范来写代码的，包括 node 项目，所以，node 不能运行 es6 模块文件就会很不便。)

import { test } from './m1'

covar = require('');nsole.log(test)

//m2.js

export default {

b:2

}//m1.js

export const test = {test:1}

export default {

a:1

}2、生产的文件

(function (modules) {

var installedModules = {}; //缓存

/

加载模块函数

传入模块id

/

function __webpack_require__(moduleId) {

// 检查缓存中是否有模块

if (installedModules[moduleId]) {

return installedModules[moduleId].exports;

}// 创建一个新模块，并缓存起来

var module = installedModules[moduleId] = {

i: moduleId,

l: false,

exports: {}

};

// 调模块的函数，modules

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

module.l = true;

// 返回对应模块

return module.exports;

}__webpack_require__.m = modules;

__webpack_require__.c = installedModules;

__webpack_require__.d = function (exports, name, getter) {

if (!__webpack_require__.o(exports, name)) {

Object.defineProperty(exports, name, {

configurable: false,

enumerable: true,

get: getter

});

}};

__webpack_require__.n = function (module) {

var getter = module && module.__esModule ?

function getDefault() {

} :

function getModuleExports() {

return module;

};

__webpack_require__.d(getter, 'a', getter);

return getter;

};

__webpack_require__.o = function (object, property) {

return Object.prototype.hasOwnProperty.call(object, property);

};

__webpack_require__.p = "";

// 加载入口文件

return __webpack_require__(__webpack_require__.s = 0);

})

([

(function (module, exports, __webpack_require__) {

const a = __webpack_require__(1)

const b = __webpack_require__(2)

}),

(function (module, __webpack_exports__, __webpack_require__) {

"use strict";

Object.defineProperty(__webpack_exports__, "__esModule", {value: true});

__webpack_exports__["default"] = ({

a: 1

});

}),

(function (module, __webpack_exports__, __webpack_require__) {

"use strict";

Object.defineProperty(__webpack_exports__, "__esModule", {value: true});

__webpack_exports__["default"] = ({

b: 2

});

})

]);

观察以上代码得到结果：

1、打包后的代码是一个立即执行函数，且传入的参数为一个数组

2、参数数组就是我们引用的模块

4、在立即函数中加载入口文件，并执行

__webpack_require__ ： 加载并执行某一个模块并将模块缓存在 installedModules 中。

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

这里是执行引用的某一个模块。

并将module，exports，require 加入模块中。

这也是为什么我们在模块中有全局变量 module/exports/require

通过对打包后的文件分析，基本可以完全理解打包过程。

如何让node运行es6模块文件及其原理详解

启动Jenkins的服务：

让 node 运行 es6 模块文件的方式有两种：

- print.js

转码 es6 模块为 commonjs 模块

hook node 的 require 机制，直接让 node 的 require 加载 import/export

1. 转码 es6 模块为 commonjs 模块

因为 node 支持几乎所有除 import/export 外的语法，所以我们只需要将 import/export 转码成 require/exports，而不需要转码其他语法。

- package.json

- src/

- index.js

- ...

# package.json

{"main": "lib/index.js" # 由工具转码 src 目录下源文件到 lib 目录下

}# src/index.js

import print from './print';

print('index');

export default print;

# src/print.js

export default str => {

console.log('print: ' + str);

};

因为 src 目录下的源文件都是 es6 模块化规范的，node 并不能直接运行，所以需要转码成 commonjs 规范的代码。

这个过程有两个方案：

如果不会单独使用 src 目录下的某个文件，而仅仅是以 src/index.js 为入口文件使用，可以把 src 目录下的文件打包成一个文件到 lib/index.js：这种方式使用工具 rollup

如果需要单独使用 src 目录下的文件，那就需要把 src 目录下的文件一对一的转码到 lib 目录下：这种方式使用工具 gulp + babel

1.1 用 rollup 把 src 目录下的文件打包成一个文件到 lib/index.js

相关文件：

# rollup.config.js

export default {

input: 'src/index.js',

output: {

file: 'lib/index.js',

format: 'cjs',

},

};

# package.json

{"scripts": {

"build": "rollup -c"

},

"devDependencies": {

"rollup": "^0.66.4"

}}

运行命令：

npm run build

结果：

# lib/index.js

'use strict';

var print = str => {

console.log('print: ' + str);

};

print('index');

module.exports = print;

1.2 用 gulp + babel 把 src 目录下的文件一对一的转码到 lib 目录下

相关文件：

# build.js

const gulp = require('gulp');

const babel = require('gulp-babel');

gulp.task('babel', () =>

gulp.src('src//.js')

.pipe(babel({

plugins: ['@babel/plugin-transform-modules-commonjs']

}))

.pipe(gulp.dest('lib'))

);

gulp.series('babel')();

# package.json

{"scripts": {

"build": "node build.js"

},

"devDependencies": {

"@babel/core": "^7.1.2",

"@babel/plugin-transform-modules-commonjs": "^7.2.0",

"gulp": "^4.0.0",

"gulp-babel": "^8.0.0"

}}

运行命令：

npm run build

结果：

# lib/index.js

"use strict";

Object.defineProperty(exports, "__esModule", {

value: true

});

exports.default = void 0;

var _print = _interopRequireDefault(require("./print"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _print.default)('index');

var _default = _print.default;

exports.default = _default;

# lib/print.js

"use strict";

Object.defineProperty(exports, "__esModule", {

value: true

});

exports.default = void 0;

var _default = str => {

console.log('print: ' + str);

};

exports.default = _default;

2. hook node 的 require 机制，直接加载 import/export

这种机制一般是通过对 node 的 require 机制进行 hook，劫持 require 抓取的源文件代码，把源代码转码成 commonjs 规范之后，再传送给 require 机制原本的代码流中。

pirates 之类的第三方 npm 包提供了这种添加 hook 的功能。

babel-register 便是使用这种方式达到 node 运行 es6 模块文件的目的的。

2.1 使用 babel-register 直接运行 es6 模块文件

示例目录：

- package.json

- src/

- entry.js # 这里多了一个入口文件，专门用于注册 babel-register

- index.js

- ...

相关文件：

# package.json

{"scripts": {

"run": "node src/entry.js"

},

"devDependencies": {

"@babel/core": "^7.1.2",

"@babel/plugin-transform-modules-commonjs": "^7.2.0",

"@babel/register": "^7.0.0"

}}

# src/entry.js # 入口文件必须使用 commonjs 规范来写，因为还没有注册 hook

require('@babel/register')({

plugins: ['@babel/plugin-transform-modules-commonjs']

});

require('./index');

# src/index.js

import print from './print';

print('index');

# src/print.js

export default str => {

console.log('print: ' + str);

};

运行：

npm run run

结果：

# 命令行打印

这种方式因为中间转码会有额外的性能损耗，所以不建议在生产环境下使用，只建议在开发模式下使用。

2.2 使用babel-node 直接运行 es6 模块文件

babel-node 对 babel-register 进行了封装，提供了在命令行直接运行 es6 模块文件的便捷方式。

示例目录：

- package.json

- src/

- index.js

- ...

相关文件：

# package.json

{"scripts": {

"run": "babel-node src/index.js --plugins @babel/plugin-transform-modules-commonjs"

},

"devDependencies": {

"@babel/core": "^7.1.2",

"@babel/node": "^7.2.0",

"@babel/plugin-transform-modules-commonjs": "^7.2.0"

}}

# src/index.js

import print from './print';

print('index');

# src/print.js

export default str => {

console.log('print: ' + str);

};

运行：

npm run run

结果：

# 命令行打印

这种方式也不建议在生产环境下使用，只建议在开发模式下使用。

3. 链接

es6 就是指 ECMAScript 2015

es7 就是指 ECMAScript 2016

es8 就是指 ECMAScript 2017

es9 就是指 ECMAScript 2018

到写这篇文章为止，已发布了 ECMAScript 2018。

如何复用node.js包或代码

node-webkit的打包有一下几个步骤:

Meteor基于Node.js，但是却有自己的包管理系统(atmosphere)以及代码加载机制，且meteor是非异步的，这些都意味着，node.js包(npm package)和代码通常不能直接用于meteor程序。

为了防止文件过大，我们先把公共代码分离config.optimization={runtimeCk:single,splitCks:{cks:all,maxInitialRequests:Infinity,minSize:20000,cacheGroups:{vendor:{test:/node_modules/,name{constpackageName=module.context.match/)return`npm.${packageName.replace}`}}}}}

打包成模块

vue-cli 2.x 多环境打包配置，根据打包命令生成不同的打包文件名

作

在package.json中的scripts中添加相关环境地址，我的环境添加如下：

test 为云//从0开始写入5个测试环境

在config目录中配置test.env.js文件

}(1) 配置process.env.NODE_ENV = 下面我们以test来配置环境'test'

(2) const webpackConfig = require('./webpack.test.conf）

(1) webpack.prod.conf.js, 并修改为webpack.test.conf.js

(2) 配置 const env = require('../config/test.env')

index.js

nwjs怎么将别的exe文件打包在一起 并且启动

html文件中需要引入多个js文件或者第三方模块(例如：jquery.js)，只引入项目js入口文件( main.js ),其他js文件均在入口文件中导入。导致可能JS文件中使用了浏览器不识别的高级语法:

这print: index个Nwjs，是开发桌面软件，需要安装，并且如果想和别的EXE文件打包，需要自己创建一个安装程序，将这两个或者多个安装程序打包进安装程序中，在安装后运行即可。

1 把自己的项目打包成zip, 比如名字为a.zip,里面直接包含了你所有的项目文件,不要带最外层的文件夹

2 把 .zip 后缀改为 .nw

3 使用copy命令打包,将.nw文件到你的nw.exe所在目录,命令行下执行 copy /b nw.exe+a.nw a.exe

4 将a.exe icudtl.dat nw.pak 三个文件发给用户,双击a.exe时即可运行.

webpack基本使用

err：文件打开失败的错误保存在err里面，如果成功err为null

step1: 创建一个项目录

fs.write(fd,'测试数据2',10,'utf-8');

注意：项目名一般 不要带中文

step2: 创建 package.json

或者：

step4: 处理第三方文件

总结：webpack可以做两件事情况：

step5: 配置入口文件和出口文件

每次修改js文件，手动输入命令： webpack 入口文件路径 -o 出口文件路径 重新打包， 每次都要输入入口文件和出口文件，麻烦。可以在项目目录下建立配置文件 webpack.config.js ,指定入口文件和出口文件:

重新打包：

step6: 实现自动打包编译

每次修改js文件，都要手动重新打包，还是麻烦？使用 webpack-dev-server 这个工具，来实现自动打包编译的功能。

webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中必须安装 webpack

在 package.json 文件中配置命令：

在终端中执行命令：

注：在终端执行 npm run dev ，就等于执行 webpack-dev-server 命令。这将在node中开启一个，并且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自动文件改变，并且自动打包。

改变文件引用路径：

执行上述命令后终端会有类似信息输出：

【 Project is running at 】——webpack-dev-server工具将项目托管到localhost:8080/端口上

【webpack output is served from /】——打包好的文件通过localhost:8080/bundle.js访问

【Content not from webpack is served from C:UsersyfbDesktop前端学习案例4.27wabpackDemo_1src】——不是通过webpack打包的文件，则是以src为根目录访问。

该项目根目录下并不存在bundel.js文件，我们可以认为webpack-dev-server把打包好的文件，以一种虚拟的形式托管到了咱们项目的根目录中，虽然我们看不到它，但是可以认为和 dist、src、node_modules平级，有一个看不见的文件，叫做 bundle.js。其实是为了频繁打包，提高效率，直接把打包的文件放在内存中。

因为项目托管到新，现在应该访问的是 该 下的项目，文件引用路径也要改变:

step7: 自动打开浏览器进行访问、配置端口号、指定托管的根目录、热重载（只是修改补丁，不重新生成整个bundle.js文件）

在 package.json 中配置命令，并重启：

step8: 使用 html-webpack-plugin 插件

使用 --contentBase 指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性。

安装 html-webpack-plugin 插件：

在 webpack.config.js 配置文件中配置插件：

html-webpack-plugin 插件的两个作用：

step9: 处理样式文件

html文件中需要引入css、less、sass样式文件。默认情况下，webpack处理不了这些样式文件。

处理css文件：

处理less样式文件

为什么 npm 要为每个项目单独安装一遍 node_modules？

1、文件查找

nodejs 中 package.json 中的依赖必须每个项目都有自己的 node_modules 文件夹，而无法在多个项目之间共用一套 node_modules （不像 Ja 中的 Men 那样共享一个全居仓库）。

依赖管理是每个现代语言的标配。在 Ja 中，men 同时兼具 依赖管理 和 打包 两大功能，而前段领域这两个功能是两种不同的工具分别提供：

Node这种node_modules文件夹的方式有利有弊。

最明显的坏处是：

var fileData = projectData.fileData;最明显的好处是：

在 npm install 时，实在嫌慢（比如因为防火墙的原因），可以把 node_modules 一起提交到 git 里去。

宝塔找不到node

因为Jenkins本身是没有在dnf的软件仓库包中的，所以我们需要连接Jenkins仓库：

没有根目录。宝塔PM2管理器在安装时没有进入到根目录安装，会导致p3、process.env 返回用户的环境信息。m2安装后，所有node命令都找不到。宝塔linux部署node项目可以通过添加站点，将node项目从localhost打包到到站点。

nodejs编译后js文件名前缀

（7）使用node进行web开发

Node.js 是一个基于 Chrome V8 引擎的 JaScript 运行环境。

Node与jaScript的区别在于，jaScript的顶层对象是window,而node是global

//这里使用的var声明的变量不是全局的，是当前模块下的，用global声明的表示是全局的

var s = 100;

global.s = 200;

//这里访问到的s是var生命的

console.log(s); //100

//这里访问到的才是全局变量

console.log(global.s); //200

模块：在node中，文件和模块是一一对应的，也就是一个文件就是一个模块；每个模块都有自己的作用域，我们通过var申明的变量并非全局而是该模块作用域下的。

（2）module模块

1）首先按照加载的模块的文件名称进行查找，如果没有找到，则会带上 .js、.json 或 .node 拓展名在加载

2）以 '/' 为前缀的模块是文件的路径。 例如，require('/home/marco/foo.js') 会加载 /home/marco/foo.js 文件。

3）以 './' 为前缀的模块是相对于调用 require() 的文件的。 也就是说，circle.js 必须和 foo.js 在同一目录下以便于 require('./circle') 找到它。

4）当没有以 '/'、'./' 或 '../' 开头来表示文件时，这个模块必须是一个核心模块或加载自 node_modules 目录。

5）如果给定的路径不存在，则 require() 会抛出一个 code 属性为 'MODULE_NOT_FOUND' 的 Error。

2、module 作用域

在一个模块中通过var定义的变量，其作用域范围是当前模块，外部不能够直接的访问，如果我们想一个模块能够访问另外一个模块中定义的变量，可以有一下两种方式：

1）把变量作为global对象的一个属性，但这样的做法是不的

2）使用模块对象 module。module保存提供和当前模块有关的一些信息。

在这个module对象中有一个子对象exports对象，我们可以通过这个对象把一个模块中的局部变量对象进行提供访问。

//这个方法的返回值，其实就是被加载模块中的module.exports

require('./02.js');

3、__dirname：当前模块的目录名。

例子，在 /Users/mjr 目录下运行 node example.js：

console.log(__dirname);

console.log(path.dirname(__filename));

4、__filename：当前模块的文件名（处理后的路径）。当前模块的目录名可以使用 __dirname 获取。

在 /Users/mjr 目录下运行 node example.js：

console.log(__filename);

// 输出: /Users/mjr/example.js

console.log(__dirname);

（3）process（进程）

process 对象是一个全局变量，提供 Node.js 进程的有关信息以及控制进程。 因为是全局变量，所以无需使用 require()。

1、process.argv

返回进程启动时的命令行参数。个元素是process.execPath。第二个元素是当前执行的JaScript文件的路径。剩余的元素都是额外的命令行参数。

console.log(process.argv);

打印结果：

2、process.execPath返回启动进程的可执行文件的路径。

在process.env中可以新增属性：

process.env.foo = 'bar';

console.log(process.env.foo);

可以通过delete删除属性：

delete process.env.foo;

console.log(process.env);

在Windows上，环境变量不区分大小写

4、process.pid 属性返回进程的PID。

5、process.platform属性返回字符串，标识Node.js进程运行其上的作系统平台。

6、process.title 属性用于获取或设置当前进程在 ps 命令中显示的进程名字

7、process.uptime() 方法返回当前 Node.js 进程运行时间秒长

注意: 该返回值包含秒的分数。 使用 Math.floor() 来得到整秒钟。

8、process.versions属性返回一个对象，此对象列出了Node.js和其依赖的版本信息。

process.versions.modules表明了当前ABI版本，此版本会随着一个C++API变化而增加。 Node.js会拒绝加载模块，如果这些模块使用一个不同ABI版本的模块进行编译。

9、process对象-输入输出流

var a;

var b;

process.stdout.write('请输入a的值: ');

process.stdin.on('data', (ck) => {

if (!a) {

a = Number(ck);

process.stdout.write('请输入b的值:');

}else{

b = Number(ck);

process.stdout.write('a+b的值:'+(a+b));

process.exit();

}});

（4）Buffer缓冲器

Buffer类，一个用于更好的作二进制数据的类，我们在作文件或者网络数据的时候，其实作的就是二进制数据流，Node为我们提供了一个更加方便的去作这种数据流的类Buffer,他是一个全局的类

1、如何创建使用buffer

Buffer.from(array) 返回一个 Buffer，包含传入的字节数组的拷贝。

Buffer.from(arrayBuffer[, byteOffset [, length]]) 返回一个 Buffer，与传入的 ArrayBuffer 共享内存。

Buffer.from(buffer) 返回一个 Buffer，包含传入的 Buffer 的内容的拷贝。

Buffer.from(string[, encoding]) 返回一个 Buffer，包含传入的字符串的拷贝。

Buffer.alloc(size[, fill[, encoding]]) 返回一个指定大小且已初始化的 Buffer。 该方法比 Buffer.allocUnsafe(size) 慢，但能确保新创建的 Buffer 不会包含旧数据。

Buffer.allocUnsafe(size) 与 Buffer.allocUnsafeSlow(size) 返回一个指定大小但未初始化的 Buffer。 因为 Buffer 是未初始化的，可能包含旧数据。

// 创建一个长度为 10、且用 01 填充的 Buffer。

const buf1 = Buffer.alloc(10,1);

// 创建一个长度为 10、且未初始化的 Buffer。

// 这个方法比调用 Buffer.alloc() 更快，但返回的 Buffer 实例可能包含旧数据，因此需要使用 fill() 或 write() 重写。

const buf2 = Buffer.allocUnsafe(10);

const buf3 = Buffer.from([1, 2, 3]);

const buf4 = Buffer.from('tést');

console.log(buf1); //

console.log(buf2); //

console.log(buf3); //

console.log(buf4); //

2、Buffer对象提供的toString、JSON的使用

1）buf.toString(encoding，start，end)

var bf = Buffer.from('miaov');

console.log(bf.toString('utf-8',1,4)); //iaov

console.log(bf.toString('utf-8',0,5)); //miaov

console.log(bf.toString('utf-8',0,6)); //miaov

2）buf.write(string，offset，length，encoding)

string 要写入 buf 的字符串。

offset 开始写入的偏移量。默认 0，这里指的是buffer对象的起始要写入的位置。

length 要写入的字节数。默认为 buf.length - offset。

encoding string 的字符编码。默认为 'utf8'。

返回: 已写入的字节数。

var str = "miaov hello";

var bf = Buffer.from(str);

var bf2 = Buffer.alloc(8);

bf2.write(str,0,5);

console.log(bf);

console.log(bf2);

3）buf.toJSON()

const buf = Buffer.from([0x1, 0x2, 0x3, 0x4, 0x5]);

const json = JSON.stringify(buf);

console.log(json);

// 输出: {"type":"Buffer","data":[1,2,3,4,5]}

3、Buffer中静态方法的使用

1）Buffer.isEncoding(encoding) ： 判断是否是Buffer支持的字符编码，是则返回true，不是则返回false

console.log(Buffer.isEncoding('utf-8')); //true

2）Buffer.isBuffer(obj) ：如果 obj 是一个 Buffer，则返回 true，否则返回 false。

（5）fs（文件系统）

该模块是核心模块，需要使用require('fs')导入后使用，该模块主要用来作文件

1、fs.open(path, flags, mode, callback)

path：要打开的文件的路径；

flags：打开文件的方式 读/写；

mode：设置文件的模式 读/写/执行

callback(err，fd)：文件打开以后，在回调函数中做相应的处理,回调函数的两个参数：

fd：被打开文件的标识

var fs = require('fs');

fs.open('./test.txt','r',function(err,fd){

if(err){

console.log("文件打开失败");

}else{

console.log("文件打开成功");

}});

2、fs.openSync(path, flags, mode) ：返回文件描述符。

var fs = require('fs');

console.log(fs.openSync('./test.txt','r')); //3

3、fs.read(fd, buffer, offset, length, ition, callback)

从 fd 指定的文件中读取数据；

buffer 指定要写入数据的 buffer；

offset 指定 buffer 中开始写入的偏移量；

length 指定要读取的字节数；

ition 指定文件中开始读取的偏移量。 如果 ition 为 null，则从文件的当前位置开始读取；

callback 有三个参数 (err, bytesRead, buffer)

示例：test.txt 中的值为123456789

fs.open('./test.txt','r',function(err,fd){

if(!err){

var bf = Buffer.alloc(5);

fs.read(fd,bf,0,5,0,function(){

console.log(bf.toString()); //12345

})

}});

4、fs.write(fd, buffer, offset, length, ition, callback)

将 buffer 写入到 fd 指定的文件。

offset 指定 buffer 中要开始被写入的偏移量，length 指定要写入的字节数。

ition 指定文件中要开始写入的偏移量。 如果 typeof ition !== 'number'，则从当前位置开始写入。

callback 有三个参数 (err, bytesWritten, buffer)，其中 bytesWritten 指定 buffer 中已写入文件的字节数。

var fs = require('fs');

fs.open('./test.txt','r+',function(err,fd){

if(!err){

var bf = Buffer.alloc(5);

fs.read(fd,bf,0,5,0,function(){

console.log(bf.toString()); //12345

});

var bf = Buffer.from('test数据');

fs.write(fd,bf,0,10,0);

}});

fs.write(fd, string, ition, encoding, callback)

将 string 写入到 fd 指定的文件。 如果 string 不是一个字符串，则会强制转换成字符串。

ition 指定文件中要开始写入的偏移量。 如果 typeof ition !== 'number'，则从当前位置开始写入。

encoding 指定字符串的编码。

callback 有三个参数 (err, written, string)，其中 written 指定字符串中已写入文件的字节数。 写入的字节数与字符串的字符数是不同的。

5、fs.exists(path,callback)检查指定路径的文件或者目录是否存在

fs.appendFile(path, data, callback)：将数据追加到文件，如果文件不存在则创建文件。

//检查文件是否存在

var fs = require('fs');

var filename = './test2.txt';

fs.exists(filename,function(isExists){

if(!isExists){

fs.writeFile(filename,'miaov',function(err){

if(err){

console.log("文件创建失败");

}else{

console.log("文件创建成功");

}});

}else{

fs.appendFile(filename,'-leo',function(err){

if(err){

console.log("文件内容追加失败");

}else{

console.log("文件内容追加成功");

}})

}});

（6）前端项目自动化构建

1、创建myProject项目文件以及对应的文件夹

var projectData ={

'name':'myProject',

'fileData':[

{'name':'css',

'type':'dir'

},{

'name':'js',

'type':'dir'

},{

'name':'images',

'type':'dir'

},{

'name':'index.html',

'type':'file',

'content' : 'ntnttntntntt

Hello

ntn'

}]

};

var fs = require('fs');

if(projectData.name){

// 创建项目文件夹

fs.mkdirSync(projectData.name);

if(fileData// 输出: /Users/mjr && fileData.length){

fileData.forEach(function(file){

//文件或文件夹路径

file.path = './'+projectData.name +'/'+ file.name;

//根据type类型创建文件或文件夹

file.content = file.content || '';

switch(file.type){

case 'dir':

fs.mkdirSync(file.path);

break;

case 'file':

fs.writeFileSync(file.path,file.content);

break;

default:

break;

}});

}}

2、自动打包多个文件

var fs = require('fs');

var filedir = './myProject/dist';

fs.exists(filedir,function(isExists){

if(!isExists){

fs.mkdirSync(filedir);

}fs.watch(filedir,function(ev,file){

//只要有一个文件发生了变化，我们就需要对文件夹下的所有文件进行读取、合并

fs.readdir(filedir,function(err,dataList){

var arr = [];

dataList.forEach(function(file){

if(file){

//statSync查看文件属性

var = fs.statSync(filedir + '/' +file);

//mode文件权限

if(.mode === 33206){

arr.push(filedir + '/' +file);

}}

});

//读取数组中的文件内容

var content = '';

arr.forEach(function(file){

var c = fs.readFileSync(file);

content += c.toString()+'n';

});

//合并文件中的内容

fs.writeFileSync('./myProject/js/index.js',content);

})

});

});

1、搭建一个的，用于处理用户发送的请求

//加载一个模块

//通过模块下的create创建并返回一个web对象

var server = .create();

//开启 HTTP 连接，只有调用了listen方法以后，才开始工作

server.listen(8000,'localhost');

//是否正在连接

server.on('listening',function(){

console.log("listening..........");

});

server.on('request',function(){

res.write('

hello

');

res.end();

});

2、request方法有两个参数：request、response

1）request：.IncomingMessage的一个实例，获取请求的一些信息，如头信息，数据等

Vession：使用的协议的版本

headers：请求头信息中的数据

：请求的地址

mod：请求的方式

2）response：.Response的一个实例，可以向请求的客户端输出返回响应

write（ck,encoding）：发送一个数据块到相应正文中

end（ck,encoding）：当所有的正文和头信息发送完成以后调用该方法告诉数据已经全部发送完成了，这个方法在每次完成信息发送以后必须调用，并且是调用。

statusCode：该属性用来设置返回的状态码

setHeader（name,value）：设置返回头信息

writeHead（statusCode,reasonPhrase,headers）这个方法只能在当前请求中使用一次，并且必须在response.end（）之前调用

3、使用fs模块实现行为表现分离

var = require('');

var fs = require('fs');

var server = .create();

//html文件的路径

var htmlDir = __dirname + '/html/';

server.on('request',function(request,response){

var Str = .parse(request.);

//根据pathname匹配对应的html文件

switch(Str.pathname){

case '/':

sendData(htmlDir + 'index.html',request,response);

break;

case '/user':

sendData(htmlDir + 'user.html',request,response);

break;

case '/login':

sendData(htmlDir + 'login.html',request,response);

break;

default:

//处理其他情况

sendData(htmlDir + 'err.html',request,response );

break;

}});

function sendData(file,request,response){

//读取文件，存在则返回对应读取的内容，不存在则返回错误信息

fs.readFile(file,function(err,data){

if(err){

response.writeHead(404,{

'content-type':'text/html;charset=utf-8'

});

response.end('

页面不存在

')

}else{

response.writeHead(200,{

'content-type':'text/html;charset=utf-8'

});

response.end(data);

}})

}server.listen(8000,'localhost');