前段时间闲下来了,自学了一段时间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