node开发笔记

前段时间闲下来了，自学了一段时间nodejs，express，React等。在这里总结以下笔记。

首先去nodejs官方网站下载nodejs安装好，这个我就不多说了，自行安装。

然后首先介绍下nodejs命令。

---

npm 常用命令

npm install moduleNames                     //安装模块

npm install [email protected]          //安装制定版本

npm install moduleNames -g                  //将包安装到全局环境中

npm install  modulesName  --save        //安装的同时，将信息写入package.json中(如果有package.json文件时，直接使用npm install方法就可以根据package.json配置安装所有的依赖包，这样代码提交到github时，就不用提交node_modules这个文件夹了)

npm list                            //查看当前目录下已安装的node包

npm help                        //查看帮助命令

npm view moudleName dependencies                 // 查看包的依赖关系

npm view moduleName repository.url              //查看包的源文件地址

npm view moduleName engines             //查看包所依赖的Node的版本

npm help folders                         //查看npm使用的所有文件夹

npm rebuild moduleName                  //用于更改包内容后进行重建

---

然后介绍下webpack，前端的一个工具，可以让各个模块进行加载，预处理，再进行打包，功能强大，下面给推荐几个webpack的学习以及配置方法

---

入门 Webpack，看这篇就够了

官方api中文文档

一小时包教会 —— webpack 入门指南

为了使用 webpack，先新建一个空前端项目，创建一个目录，目录结构如下:

├── index.html                        // 入口 HTML

├── dist                                     // dist 目录放置编译过后的文件文件

└── src                                        // src 目录放置源文件

            └── index.js                       // 入口 js

└── webpack.config.js                  //配置webpack

如果需要配置一个小型服务器的话，就要使用到 webpack-dev-server，

 详解webpack-dev-server的使用

Webpack-dev-server结合后端服务器的热替换配置

webpack develop server

---

然后再给介绍下Gulp，gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器，它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

---

gulp详细入门教程

Gulp

前端自动化工具 -- gulp 使用简介

---

接下来介绍下我自己写的一个react router的案例

express   router                                        //使用express创建一个工程，

cd  router                
npm install         //安装express
npm install ejs    //安装ejs模块(因为express默认使用jade模版引擎，开发一些功能不方便，个人喜欢ejs所以就用ejs)

修改app.js配置模版引擎

修改view目录下的index.jade为index.ejs，并把index.ejs代码修改为html代码，如下

在项目的public目录下新建dist  src文件夹，

dist 目录放置编译过后的文件文件，src放置源文件(即开发文件)，然后安装webpack，创建以及配置webpack.config.js

npm install webpack
npminstallbabel-loader babel-preset-es2015 babel-preset-stage-0babel-preset-react babel-polyfill--save-dev                                  //安装es5  babel，用来将es6转换成es5

如果需要用到gulp，则安装gulp，配置gulpfile.js

npm install  gulpjs/gulp-cli -g
npm install  gulpjs/gulp.git#4.0--save-dev
npm install  gulp-util del gulp-rename gulp-less gulp-connect [email protected]

如需同时使用webpack以及gulp，配置请参考以下链接gulp+webpack配置

配置完成之后，开始开发你的项目把，
例如：
在src目录下创建index.js，

console.log('hello world');

启动express服务器

npm start

浏览器输入 http://localhost:3000/，即可访问页面，打开控制台即可看到  hellow world