前段时间闲下来了，自学了一段时间nodejs，express，React等。在这里总结以下笔记。
首先去nodejs官方网站下载nodejs安装好，这个我就不多说了，自行安装。
然后首先介绍下nodejs命令。
npm 常用命令
npm install moduleNames //安装模块
npm install moduleNames@3.9.1 //安装制定版本
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，先新建一个空前端项目，创建一个目录，目录结构如下:
├── index.html // 入口 HTML
├── dist // dist 目录放置编译过后的文件文件
└── src // src 目录放置源文件
└── index.js // 入口 js
└── webpack.config.js //配置webpack
如果需要配置一个小型服务器的话，就要使用到 webpack-dev-server，
Webpack-dev-server结合后端服务器的热替换配置
然后再给介绍下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 connect-rest@1.9.5--save-dev
如需同时使用webpack以及gulp，配置请参考以下链接gulp+webpack配置
配置完成之后，开始开发你的项目把，
例如：
在src目录下创建index.js，
console.log('hello world');
启动express服务器
npm start
浏览器输入 http://localhost:3000/，即可访问页面，打开控制台即可看到 hellow world
网友评论