技术

node.js npm gulp babel webpack简单笔记

微信扫一扫,分享到朋友圈

node.js npm gulp babel webpack简单笔记
收藏 0 0

node.js

npm是node下的包管理工具

npm install 包名   普通安装包,模块放到node_modules下,初始化项目时,包不会下载
npm install -g 包名   全局安装包,模块不放node_modules下,初始化项目,包也不下载
npm install -save  包名  普通安装包,模块放到node_modules下,并且写入devDependencies。初始化项目时,--production会自动下载包
npm install -save-dev  包名  普通安装包,模块放到node_modules下,并且写入devDependencies。初始化项目时,--production却不会会自动下载包

总结

devDependencies 节点下的模块是我们在开发时需要用的,比如项目中使用的 gulp ,压缩css、js的模块。这些模块在我们的项目部署后是不需要的,所以我们可以使用 -save-dev 的形式安装。像 express 这些模块是项目运行必备的,应该安装在 dependencies 节点下,所以我们应该使用 -save 的形式安装。

gulp

1.自动化:让工具自动去操作一些重复的操作

2.gulp:就是一个自动化的工具

3.使用node.js开发的一个工作流自动化工具。gulp是平台,主要是平台上的插件(gulp上是task)一步步执行下来的

babel+webpack

1.babel主要处理es6向es5编译的过程
2.webpack自动化打包工具。主要处理单页应用  webpack-stream用于支持babel
需要引入 npm install babel-loader babel-core babel-preset-env

es6

1. es6是不能直接在浏览器中运行的,需要向下编译成es5甚至es3
2. 前端自动化工具gulp,就是将es6向下编译的使用编译工具自动去执行这个过程。比如sass或者less向下编译成为 css。  es6向下编译成es5,es3都需要工具自动处理。模块依赖,文件压缩,文件合并等等
3. 编译工具:具体操作自动化中的编译工具。babel专门用于处理es6编译成为es5或者es3的工具。  webpack是专门处理模块依赖,或者将各种js,css,png,font图片打包成单个文件的工具。

简单项目结构案例

1.基础架构:业务逻辑对应了页面和交互。
2.自动构建:包含文件编译、文件合并、文件压缩。开发时的自动刷新。自动化工具自行配置好,就不再使用。
3.服务器结构:主要是数据和接口。
创建项目目录结构
es6  //项目总文件
–app //前端项目文件
—-css  //样式文件
—-js   //脚本文件
——index.js //脚本入口文件
——class  //脚本类库
——–test.js //模板类
—-views //模版文件
——index.ejs  //ejs模版文件
——error.ejs  //ejs错误文件
–server  //后端项目文件,需要安装node.js程序。https://nodejs.org/zh-cn/download/
》》》》在server文件夹下面使用  express -e . //使用ejs模版引擎,创建命令
》》》》npm install 创建需要的包
–tasks //自动化工具执行及辅助工具文件夹
—-util //创建常用文件
——orgs.js  //创建常用配置
–package.json  //使用命令npm init 创建package.json。用于配置默认依赖包
–.babelrc  //创建babel需要配置文件
–gulpfile.babel.js  //官网要求gulpfile.js。接下来的脚本使用es6,所以需要本名称。
展开阅读全文
半拉子前端的自留地,发际线逐渐后移的抠脚大叔!

愿你三冬暖,愿你春不寒; 愿你天黑有灯,下雨有伞;

上一篇

gulp任务流案例

下一篇

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

体验小程序

标签地图

分类

EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00

      微信扫一扫

      微信扫一扫