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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,324评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,356评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,328评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,147评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,160评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,115评论 1 296
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,025评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,867评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,307评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,528评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,688评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,409评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,001评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,657评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,811评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,685评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,573评论 2 353

推荐阅读更多精彩内容

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