Node.js   npm

什么是Node.js  以及npm

简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome V8 引擎的。

npm 是Node.js 的包管理工具。

npm的安装和更新

Node.js下载安装   Node.js 官网下载安装。npm自带的包管理工具。

查看安装版本信息:

  --  node -v  查看Node.js 版本信息

  --  npm -v  查看npm版本信息

更新npm到指定版本:

  --  npm install npm@5.3.0 -g

  -- npm install npm@latest -g 更新最新的稳定版本

npm 常用操作

之前我们用JQuery或者Bootstrap用cdn 或者直接手动下载并放入项目,而且要管理版本。

有了npm,我们管理自己的依赖包以及版本更加简单。

到自己项目目录下,进行以下命令:

  -- npm init -y    输入-y使用默认配置项 生成package.json文件。

  -- npm i jquery@0.0.0   简写install 为 i 下载依赖  不写@ 默认最新版本

  -- npm uninstall jquery  卸载依赖包

  -- npm update jquery   更新依赖包

  -- npm list  列出已安装的依赖

  -- npm install webpack --D 保存为开发环境依赖

  -- 老版本需要 --save 参数 现在不需要了

我们的项目目录下会生成一个 node_modules 目录,我们用npm下的包会在这个目录下。

我们所有的依赖信息放在package.json文件中,包括我们所有的依赖以及版本。

如果我们删掉 node_modules目录,可以使用 npm i  来下载所有依赖。

npm 常用配置项

当我们用npm init 的时候用了参数 -y,如果不用-y我们可以进行一些配置。

在我们的package.json文件中有很多配置项

  -- name  项目名字 中间不能有空格只能用小写

  -- version  项目版本

  -- description   项目描述信息

  -- main  项目的入口文件

  -- scripts 指定命令的快捷方式 npm run test     test是scripts里的键名 值为具体命令

  -- author 作者

  -- license  许可证

  -- dependencies  生成环境依赖的包以及版本信息

  -- devDependencies  开发环境的依赖

webpack

webpack3

webpack是什么

webpack是一个模块打包器,它将根据模块的依赖关系进行静态分析,

然后将这些模块按照指定的规则生成静态资源。

那么,我们为什么要用这个东西呢~~因为前端的包袱太多,历史遗留问题太重~~~脑补吧......

安装和配置

webpack是跑在Node.js环境下的,所以确定自己有node环境。

安装方式:

  -- npm install webpack -g  全局安装

  -- webpack  <要打包文件>  <打包后文件>     全局这种方式进行打包

  -- npm install webpack   在自己的项目下 npm init 后在下载webpack 这就是局部安装

  -- node_modules/.bin/webpack <要打包文件>  <打包后文件>   项目里要打包文件是入口文件

  -- 路径太长 太烦 可以自定义命令  在package.json 文件的 scripts下面自定义

entry 和 output

entry 入口文件  output 出口文件

上面我们自定义命令的时候 命令太长了~~而且我们命令太多的时候我们需要每次都自定义多条命令~~

我们可以把命令写在webpack.config.js文件中~~

module.export = {
// 所有的入口文件
entry: {
home: './main.js',
login: './login.js',
},
// 出口文件
output: {
filename: '[name].bundle.js',
path: __dirname + '/dist',
}
}
// backage.json 下的scripts
scripts: {
"pack": "node_moudles/.bin/webpack --watch"
} // 运行命令
npm run pack

webpack.config.js

webpack4

webpack的新特性

1, webpack不在单独使用,需要webpack-cli

  -- 全局安装  npm install webpack webpack-cli -g -D

  -- 局部安装  npm install webpack webpack-cli -D

2, 增加了模式区分 (development, production)

  --webpack --mode development/production 进行模式切换

  -- development 开发者模式 打包默认不压缩代码

  -- production  生产者模式 上线时使用,压缩代码。 默认是这个模式

3,固定入口目录为src,与入口默认文件index.js,打包后文件在新增的dist目录下

  -- 当只有一个入口文件也就是src/index.js时,无需增加webpack.config.js

4,多入口以及多出口

entry: {
// 多入口
a: "./src/js/index.js",
b: "./src/js/index2.js",
}
output: {
// 多出口
path: path.resolve(__dirname, 'dist'),
filename: './js/[name].bundle.js'
}

webpack.config.js

vue-cli

vue-cli是官方提供的快速构建这个单页面应用的脚手架。

根据官方文档中的构件流程:

  -- 前提是已经安装了node.js 否则npm都用不了

  -- 1,使用npm全局安装vue-cli

      npm install -g vue-cli

  -- 2, 安装完成后在自己的工作空间里

      vue init webpack vue-demo

    输入命令后进入安装阶段,需要用户输入一些信息 这里省略了.....

  -- 3,切换到我们的项目目录下

      cd vue-demo

      npm run dev

目录结构:

  -- build 里面是一些操作文件,使用npm run * 时其实执行的就是这里的文件

  -- config 配置文件,执行文件需要的配置信息

  -- src 资源文件 所有的组件以及所有的图片 都在这个文件夹下

  -- node_modules  项目依赖包

  -- static 静态资源

  -- package.json   依赖包的json文件

其实这里面命令很多~我们在后续项目中应用到再说~~~

vue-cli配置JQuery、bootstrap

第一步  下载安装

  -- npm install jquery

  -- npm install bootstrap

第二步 修改build/webpack.base.conf.js

const webpack = require('webpack')
// 在module.exports里添加插件
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery",
// Popper: ['popper.js', 'default']
})
],
// *******下面是如果手动下载bootstrap用的*******
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
// 如果是手动下载的bootstrap需要添加这个配置
// 'assets': path.resolve(__dirname, '../src/assets'),
// 'jquery': 'jquery/src/jquery'
}
},

修改配置文件

第三步 修改主程序的js文件 main.js

import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

main.js

可以用啦~~~~~

vue-cli 3.0

第一步 下载vue-cli 3.0

  -- npm install -g @vue/cli

  -- 报错 npm error  可以运行下面命令

    -- npm cache clean --force && npm cache verify

第二步 创建项目

  -- vue create xxxx

  之后会出现很多选项,我们可以根据自己的习惯去选择~~

第三步 目录结构以及配置文件

  -- vue-cli3 目录更加简单

  -- 我们手动在项目根目录下创建  vue.config.js 里面写vue的配置信息

vue-cli3 配置jQuery、bootstrap

  -- 跟vue-cli2一样的配置,手动创建一个webpack.base.conf.js

npm、webpack、vue-cli的更多相关文章

  1. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  2. Mac下通过npm安装webpack 、vuejs,以及引入jquery、bootstrap等(初稿)

    前言: 初次接触前端开发技术,一些方向都是在同事的指引和自己的探索后,跑了个简易web,迈入全栈系列.由于是事后来的文章,故而暂只是杂记,写的粗略且不清晰,后续将补之. 主要参考文档: http:// ...

  3. element-ui和npm、webpack、vue-cli搭建Vue项目

    一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...

  4. npm、webpack、vue-cli 快速上手版

    Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome V8 引擎的. npm 是Node.js 的包管理 ...

  5. npm、webpack、vue-cli 快速上手

    npm+webpack+vue-cli快速上手   Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome ...

  6. 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、Git/SVN)

    一. 各类概念和指令介绍 1. NVM (1).  全称:Node Version Manager,是一款针对Nodejs的版本管理工具,由于Node的版本很多,很多时候我要需要依赖多个版本,并且要求 ...

  7. npm、webpack、vue-cli快速上手版

    node.js和npm npm的安装和更新 Node.js下载安装,npm自带的包管理工具. 查看安装版本信息: node -v 查看node.js版本信息 npm -v 查看npm版本信息 更新np ...

  8. Grunt、gulp、webpack、不要听着高大上你就上,试试Codekit?

    下载地址:https://incident57.com/codekit/ 官方网站了解更多 要编译Less.Sass.Stylus, CoffeeScript, Typescript, Jade, H ...

  9. 基于node、webpack、搭建一个koa服务器

    1.首先需要node(去官网下载) 2.见一个文件夹  比如koa          cmd——r       cd  koa文件 3.npm init 4.安装webpack       (本地安装 ...

随机推荐

  1. HBase篇(4)-你不知道的HFile

    [每日五分钟搞定大数据]系列,HBase第四篇 这一篇你可以知道, HFile的内部结构? HBase读文件细粒度的过程? HBase随机读写快除了MemStore之外的原因? 上一篇中提到了Hbas ...

  2. 面试 9:Java 玩转冒泡排序

    面试 9:用 Java 实现冒泡排序 南尘的朋友们,新的一周好,原本打算继续讲链表考点算法的,这里姑且是卡一段.虽然在我们 Android 开发中,很少涉及到排序算法,因为基本官方都帮我们封装好了,但 ...

  3. 深入理解Redis复制

    复制 A few things to understand ASAP about Redis replication. 1) Redis replication is asynchronous, bu ...

  4. 【开源】Skatch 正式发布 - 极速渲染抽象派草图

    极速渲染抽象派草图 DEMO Simple Letter 简介 Skatch 这个词由 sketch wechart abstract cax 混合而成的一个新词,代表了cax wechart 抽象艺 ...

  5. .NET Core 2.1中的分层编译(预览)

    如果您是.NET性能的粉丝,最近有很多好消息,例如.NET Core 2.1中的性能改进和宣布.NET Core 2.1,但我们还有更多的好消息.分层编译是一项重要的新特性功能,我们可以作为预览供任何 ...

  6. win8.1系统下安装ubuntu实现双系统实践教程

    寒假闲来无事,一程序猿哥们给发了一个linux的shell编程指南,看了几张感觉不错.于是装一个试试. 没想到一装才知道了那么的问题. 下面开始: step 1: 软件准备:Ubuntu 系统镜像,这 ...

  7. Palindromic characteristics CodeForces - 835D (区间DP,预处理回文串问题)

    Palindromic characteristics of string s with length |s| is a sequence of |s|integers, where k-th num ...

  8. c语言之字符串和格式化输入输出

    字符串和格式化输入输出 #include<stdio.h> #include<string.h> #define DENSITY 62.4 int main(void) { f ...

  9. CSS小东西

    1.表格列自动均分 table-layout:fixed; 2.单元格内容自动换行 word-wrap:break-word;

  10. LLDB 3.9.1 安装方法

    1. baidu到一个安装方法 进行尝试: 来源: https://zhuanlan.zhihu.com/p/40780819https://www.jianshu.com/p/f965bbba6eb ...