webpack的npm扩展使用
一、NPM的扩展使用
(1) npm init:初始化一个Node.js项目------创建必须的package.json文件
npm init -y:创建必须的package.json文件
(2) npm help json:查看package.json文件中可用的所有条目
(3) npm install xxx:下载安装指定的扩展依赖模块
npm install xxx --save:下载并安装指定的依赖模块,并声明为"运行时依赖"
npm install xxx ---save-dev:下载并安装指定的依赖模块,并声明为“开发时依赖”
npm install:根据package.json中的“运行时依赖”和“开发时依赖”列表指定模块下载
(4) npm run xxx:执行当前目录下 package.json中scripts所定义的命令;若xxx是test/start/stop/rebuild之一,可以省略
掉run 简写为npm xxx,即npm run start等价于 npm start
=============================================================
package.json中的特殊用法:
{
“scripts”: { 定义可以使用npm run 执行的命令
"test":"node ./test.js",
"start": "node ./main.js"
}
"dependencies":{ 定义当前项目的“运行时依赖”
"express":"^4.3.0",
"mysql":"^2.16.0"
},
"devDependencies":{ 定义当前项目的“开发时依赖”
"scss":"^1.15.0",
"gulp":"2.0.0"
}
}
运行时依赖:指当前项目在部署到服务器上供客户端请求时需要使用到的第三方模块
开发时依赖:指当前项目在程序员开发阶段(在最终运行之前)需要使用到的第三方模块
二、模块的使用
注意:在JS中使用全局变量/函数,会自动成为全局对象的成员——称为“全局对象的污染问题”;后续重名的变量/函数会覆盖之前的变量/函数。 实际开发中,应努力避免使用全局变量/函数。
解决方案:—— 模块(Module)
CommonJS中的模块规范 |
ES6中的模块规范 |
||
导出 |
//x.js module.exports = { age: 20, work: function(){ } } //每个模块只能导出一次 |
//x.js export var age = 20; export function work(){} //每个模块可以导出多个内部成员 |
//x.js export default { age: 20, work: function(){} } //每个模块只能导出一个默认对象 |
导入 |
//y.js const obj = require('./x'); console.log(obj.age); obj.work(); |
//y.js import {age, work} from './x'; console.log(age); work(); |
//y.js import obj from './x'; console.log(obj.age); obj.work(); |
书写位置 |
导入/导出可以写在顶级或内部 |
导出/导入只能写在最顶级 |
|
适用场合 |
服务器端Node.js中使用; 浏览器中不能使用 |
服务器端Node.js不支持 —— 这是客户端浏览器中的JS模块规范!—— 目前所有浏览器都不能直接支持此规范! |
三、Webpack的使用
官网:www.webpackjs.com
作用:把多个静态资源文件(脚本/样式/图片等)“打包”为一个/少数几个静态资源文件 —— 减少客户端请求次数/数据传输量,提高Web访问效率。
使用方法:先使用传统方法写完一个Web项目(若干js/css/图片...),再使用Webpack把静态资源打包,在HTML中引入打包后的资源文件让客户端请求。
使用步骤:
(0)按照传统方法编写Web项目
(1)下载并安装Webpack所需要的所有模块
npm i webpack --save-dev
(2)在项目根目录下创建Webpack主配置文件
webpack.config.js 注意文件位置/名称
(3)运行Webpack,读取配置文件,执行打包工作
node ./node_modules/webpack/bin/webpack.js
(4)修改HTML文件,只引入打包后得到的打包文件即可
webpack的npm扩展使用的更多相关文章
- vue-cli webpack项目npm run dev启动过程
前言 通过vue init webpack和npm install命令初始化项目后,执行npm run dev就打开了网站http://localhost:8080.初学者不知道index.html. ...
- webpack、npm、nginx常用命令
webpack命令:webpack --watch 监听变动并自动打包,简写-wwebpack -p --progress --color 压缩混淆脚本webpack -d 生成映射文件,告知那些模 ...
- 基于 webpack 的 chrome 扩展开发探索
起 最近利用闲暇时间在进行一款 chrome 扩展 V2EX-HELPER 的开发(如果巧遇 V 友欢迎试用),今天把它彻底改成了用 webpack 打包依赖的模式,不由得感概 webpack 的强大 ...
- Scss开发临时学习过程||webpack、npm、gulp配置
SCSS语法: 假设变量申明带有!default,那么如果在此申明之前没有这个变量的申明,则用这个值,反之如果之前有申明,则用申明的值. ‘...’传递多个参数: @mixin box-shadow( ...
- webpack nodejs npm关系
nodejs是js后端运行平台,可以把它看成java体系中对应的jdk,是三个里面最基础的.npm是nodejs的包管理工具,可以把它看成maven中包依赖管理那部分.webpack是前端工程化打包工 ...
- vue项目webpack中Npm传递参数配置不同域名接口
项目开发中,前端在配置后端api域名时很困扰,常常出现:本地开发环境: api-dev.demo.com测试环境: api-test.demo.com线上生产环境: api.demo.com, 这次是 ...
- 16 关于webpack和npm中几个问题的说明
1.json里面不能写注释 2.'webpack-dev-server'不是内部或外部命令,也不是可运行的程序或批处理文件. 注意:webpack-dev-server包只需要本地安装就行,不用全局安 ...
- webpack打包优化之外部扩展externals的实际应用
目录 前言 externals定义 用法 string array object function regex 实际案例 打包时间 打包之后包的大小 浏览器加载 需要注意 参考 前言 使用vue-cl ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
随机推荐
- 1046 Shortest Distance (20 分)
1046 Shortest Distance (20 分) The task is really simple: given N exits on a highway which forms a si ...
- Python flask 构建微电影视频网站☝☝☝
Python flask 构建微电影视频网站☝☝☝ 1.安装数据库连接依赖包 pip install flask-sqlalchemy 2.创建movie数据库 在CentOS虚拟机,进入MaridD ...
- vue中百度地图API的调用
1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载 安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...
- Python_函数传参
关于函数中传递参数的相关知识 其中 万能参数 第一次听说 但感觉用处不大 后面用到再详细整理
- ssh隧道代理连接
0x00 什么是SSH隧道 场景: 假设有两台主机: A主机为外网,B主机为内网通常来说外网主机A是无法直接连接到内网主机B的,这时如果要实现A主机通过ssh控制B主机,通常来说有两种方法: 1.端口 ...
- Web前端安全之iframe
防嵌套网页 比如,最出名的clickhacking就是使用iframe来 拦截click事件.因为iframe享有着click的最优先权,当有人在伪造的主页中进行点击的话,如果点在iframe上,则会 ...
- jar包的多层级maven依赖的坑与正确传递方法
这个问题简述起来就是项目加载jar包但是无法加载jar包的依赖 这是一个maven的特性吗? 问题发生前 程序猿经常自己写一些库实现或收集常用的逻辑方法(算法和设计模式等等),以方便多个项目使用,避免 ...
- MongoDB-系统时钟跳变引发的风波
目录 背景 一. 对 oplog 的影响 oplog 原理 二.主备倒换 小结 声明:本文同步发表于 MongoDB 中文社区,传送门: http://www.mongoing.com/archive ...
- 百万年薪python之路 -- 并发编程之 多线程 三
1. 阻塞,非阻塞,同步,异步 进程运行的三个状态: 运行,就绪,阻塞. 从执行的角度: 阻塞: 进程运行时,遇到IO了,进程挂起,CPU被切走. 非阻塞: 进程没有遇到IO 当进程遇到IO, ...
- 基于docker的mysql8的主从复制
基于docker的mysql8的主从复制 创建mysql的docker镜像 构建docker镜像,其中数据卷配置内容在下面,结构目录如下 version: '3.7' services: db: # ...