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 ...
随机推荐
- GUI篇 tkinter (Label,Button)之一
import tkinterfrom tkinter import * # tkinter._test() # 实例化一个窗口对象base = tkinter.Tk()# 修改窗口的标题base.wm ...
- 解读C#中的正则表达式
本文摘自LTP.NET知识库. regexp规则类包含在System.Text.RegularExpressions.dll文件中,在对应用软件进行编译时你必须引用这个文件: System.Text. ...
- 再谈Transaction——MySQL事务处理分析
MySQL 事务基础概念/Definition of Transaction 事务(Transaction)是访问和更新数据库的程序执行单元;事务中可能包含一个或多个 sql 语句,这些语句要么都执行 ...
- python常用算法(5)——树,二叉树与AVL树
1,树 树是一种非常重要的非线性数据结构,直观的看,它是数据元素(在树中称为节点)按分支关系组织起来的结构,很像自然界中树那样.树结构在客观世界中广泛存在,如人类社会的族谱和各种社会组织机构都可用树形 ...
- Potato土豆win综合提权
0x01 NBNS和WDAP NBNS: 在 Windows 系统中的另外一种名称就是 NetBIOS 名称,准确的说 NetBIOS 名称并非是一种名字系统,而是 Windows 操作系统网络的一个 ...
- php架构师都要会什么
架构师的成长离不开踩坑,不断试验各种方案,各种踩坑,从小坑到大坑,逐渐归纳.另外就是多学习多交流,兼收并蓄,不用特别在意细节,观其大略,了解常见的各种东西的核心价值与短板所在.一个程序和计算系统软件体 ...
- java 链接mysql
import java.sql.*; public class ConnectSql { static final String JDBC_DRIVER = "com.mysql.jdbc. ...
- webpack——npm -i 与npm install -s与-d的区别
在 package.json 文件里面的[devDependencies]和[dependencies]对象有什么区别呢? devDependencies 里面的插件只用于开发环境,不用于生产环境, ...
- 详解Java8 Optional类{最全}
1:Optional 1.1 概述 Optional 类主要解决的问题是臭名昭著的空指针异常(NullPointerException),提供了一些的方法代替过去的if-else处理逻辑,并与Stre ...
- Fiddler抓包和工作原理
一.概述 Fiddler是一款免费且功能强大的数据包抓取软件.它通过代理的方式获取程序http通讯的数据, 可以用其检测网页和服务器的交互情况,能够记录所有客户端和服务器间的http请求, 支持监视. ...