node开发笔记

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

官方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 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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 众所周知目前比较火的工具就是gulp和webpack,但webpack和gulp却有所不同,本人两者的底层研...
    cduyzh阅读 5,211评论 0 13
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,858评论 1 32
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 12,550评论 7 35
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 10,692评论 4 31
  • 今天同城同好会线下聚会,讨论话题《谁才是世界上最好的语音》 A:PHP是世界上最好的语言 B:C语言笑而不语 我:...
    Sakura_奈阅读 2,839评论 0 0

友情链接更多精彩内容