npm & webpack
npm 全称 node package manager，是 js 的包管理工具，开发人员可以把写好的框架、库发布到 npm 上，使用者在使用时候就可很方便地通过 npm 来下载，只要在 npm官网 有的包，就可通过 npm install 包名 下载，包名都是唯一的不会重复
npm 与 nodejs 共同发布，所以在 nodejs官网 下载安装了 nodejs 后就可直接在命令行中使用 npm。通过查看版本检查两者是否安装成功
因为 npm 的更新频率更快，所以可单独更新 npm
npm install npm --global //--global为全局安装,可简写为--g
由于我的 nodejs 是用的旧版本，所以导致更新 npm 时出错
，去官网下载了最新版 nodejs 后问题解决
package.json
package.json 是包描述文件，存储着包的信息（包名、版本、项目的依赖项），最好每个项目都要有个 package.json 文件，就像产品说明书
此文件可自己普通文本改名的方式创建，但一般是 npm 命令创建，在当前目录打开命令行输入 npm init
运行此命令后，会以向导的方式填写包的信息，不想填的话可回车略过。也可使用 npm init --yes 命令直接快速创建，最后根据需要修改创建好的 package.json 文件即可
建议执行 npm install 包名 时加上--save，会在 package.json 的 dependencies 属性添加依赖项，保存第三方包的依赖信息
npm install --save jquery
当依赖包没有的时候，直接执行 npm install 命令，则会根据当前目录的 package.json 文件的 dependencies 里所有依赖项自动全部下载完
npm 常用命令
npm 5 版本之后会自动生成 package-lock.json 文件，并且安装包的时候都会生成或更新这个文件
安装包时也不需要加 --save 参数，会自动保存依赖信息
package-lock.json 这个文件会保存 node_modules 中所有包的信息（版本、下载地址），这样的话重新 npm install 的时候速度会更快，另一个作用是锁定下载的包的版本号，防止自动升级新版
安装webpack
webpack是模块打包机，把 css、js、less 等打包成一个总的js文件供浏览器使用
webpack 要先进行全局安装
到了 webpack4，命令行相关的内容都移到 webpack-cli，所以还需要安装 webpack-cli，否则会出现如下信息
因为 webpack 是全局安装的，所以 webpack-cli 也要全局安装
之后可查看 webpack 版本
小Demo
准备就绪，开始写小案例一个加法计算器，在F盘新建了个文件夹名为 Demo，进入这个空文件夹shift+右键选择 “在此打开命令行” 或 Powershell 窗口
在当前自己的项目里（这里为 Demo 文件夹）安装局部 webpack
之后Demo文件夹会出现node_modules和package-lock.json
然后使用 npm init 命令初始化一个 package.json ，
之后在Demo下创建两个文件夹（ src与dist ）和一个空的 js 文件（ webpack.config.js ）
src 存放人可以看懂的源代码，具备一定的功能划分如MVC
dist 存放真实上线的代码（减少请求、混淆代码），机器能看懂
接下来要配置 webpack.config.js，好像涉及到 nodejs 的内容...... 要学习下
var path = require('path');
module.exports = {
//指定入口文件
entry: {
entry: './src/main.js'
},
//指定出口文件.打包生成build.js,如果没有dist文件夹会自动创建.最好写绝对路径，不然会报下图中的错误Invalid configuration object
output: {
path: path.join(__dirname,'dist'),
filename: 'build.js'
},
//模块,指定加载器,可配置各种加载器,这样就不担心less等文件的编译问题，这里用不到所以没写
module: {}
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="n1"> +
<input type="text" id="n2">
<button id="btn">=</button>
<input type="text" id="result"> <script src="../dist/build.js"></script>
</body>
</html>
main.js
//commonjs方式引入cal对象，由于node的模块作用域，所以必须要导入，之后才能使用这个对象
//var cal = require('./cal.js'); //ES6的模块方式引入
import cal from './cal.js'; //获取按钮
document.getElementById('btn').onclick = function(){
var n1 = document.getElementById('n1').value - 0;
var n2 = document.getElementById('n2').value - 0;
var sum = cal.add(n1,n2);
document.getElementById('result').value = sum;
};
cal.js
var cal = {
add:function(n1,n2){
return n1 + n2;
}
};
//commonjs导出方式
//module.exports = cal;
//ES6导出方式
export default cal;
最后直接在当前目录使用 webpack 命令即可完成打包
浏览器中效果图，点击等号算出结果
npm源
由于npm官网是国外的，所以使用 npm install 命令下载时可能会很慢，这时可使用 淘宝的npm镜像 ，相当于将官网的内容复制了一份放在国内。使用方式有三种
npm & webpack的更多相关文章
- npm+webpack+babel+react安装
npm+webpack+babel+react安装 1.首先要安装 Node.js, Node.js 自带了软件包管理器 npm 2.在项目文件目录下生成package.json # 进入项目目录$ ...
- Bootstrap4默认样式不对胃口？教你使用NPM+Webpack+SASS来定制
Bootstrap 是一个流行的前端样式库,可以方便快速的构建应用,但默认样式可能不尽人意,本文就介绍如何使用 NPM, Webpack, SASS 针对它的源码来定制自己的主题.版本使用的是 Boo ...
- webpack : 无法加载文件 C:\Users\Eileen\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本
报错内容: webpack : 无法加载文件 C:\Users\Eileen\AppData\Roaming\npm\webpack.ps1,因为在此系统上禁止运行脚本.有关详细信息,请参阅 http ...
- npm + webpack +react
踏上征途 在开始之前,你需要把你的 Node.js 和 NPM 都更新到最新的版本.访问 nodejs.org 查看安装详情.我们将会使用 NPM 安装一些工具. 开始使用 Webpack 非常简单, ...
- 安装node/npm/webpack步骤
nodejs软件的下载地址:https://nodejs.org/en/ 1.只要安装好了nodejs,就自动安装好了npm包. 2.在cmd中通过命令node -version查看是否安装好node ...
- npm webpack vue-cli
npm.webpack.vue-cli 快速上手版 Node.js npm 什么是Node.js 以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chro ...
- npm, webpack, vue-cli, vue-x, axios
1,什么是node.js,以及npm 简单的来说Node.js就是运行在服务端的JavaScript,是基于Chrome V8引擎的.npm是Node.js包的管理工具. 2,npm的安装和更新 No ...
- vue-cli安装以及创建一个简单的项目(一)(Node\npm\webpack简单使用)
1.关系介绍 1.简单的说 Node.js 就是运行在服务端的 JavaScript. 2.NPM是随同NodeJS一起安装的包管理工具(新版的nodejs已经集成了npm),能解决NodeJS代码部 ...
- vue2.0 + npm + webpack 开发===环境配置
cnpm安装:npm install -g cnpm --registry=http://registry.npm.taobao.org 1.安装vue-cli脚手架构建工具cnpm install ...
随机推荐
- Luogu P3966 [TJOI2013]单词
题目链接 \(Click\) \(Here\) 本题\(AC\)自动机写法的正解之一是\(Fail\)树上跑\(DP\). \(AC\)自动机是\(Trie\)树和\(Fail\)树共存的结构,前者可 ...
- 【清北学堂2018-刷题冲刺】Contest 2
这场比赛的T1相当智熄.由于至今无法理解题意,我只能解出前20分.诸位dalao谁能比较好地理解题意(独立性)的,请联系我,不胜感激. 在此本蒟蒻只能贴上题面: Task 1:选举 [问题描述] ...
- 入侵检测中需要监控的注册表路径研究（Windows Registry Security Check）
1. Windows注册表简介 注册表(Registry,繁体中文版Windows称之为登录档)是Microsoft Windows中的一个重要的数据库,用于存储系统和应用程序的设置信息.早在Wind ...
- 2.抽象工厂（Abstract Factory）
常规的对象创建方法: //创建一个Road对象 Road road =new Road(); new 的问题: 实现依赖,不能应对“具体实例化类型”的变化.解决思路: 封装变化点-----哪里变 ...
- hdu 6383
题意是说给定一个序列,能否通过任意次对部分数字 +1,对部分数字 -2的操作使得序列在满足全部非负且任意两元素的差值不超过1的前提下最小值最大,求最大值. 一开始的时候没有注意到整个序列全是非负数,还 ...
- Spring Boot中使用使用Spring Security和JWT
目标 1.Token鉴权 2.Restful API 3.Spring Security+JWT 开始 自行新建Spring Boot工程 引入相关依赖 <dependency> < ...
- 在Java中调用Python
写在前面 在微服务架构大行其道的今天,对于将程序进行嵌套调用的做法其实并不可取,甚至显得有些愚蠢.当然,之所以要面对这个问题,或许是因为一些历史原因,或者仅仅是为了简单.恰好我在项目中就遇到了这个问题 ...
- Win10下Prolific USB-to-Serial Comm Port驱动提示不能使用
选择从计算机的设备驱动程序列表中选取 选择第一个安装即可.
- 从零开始搭建轻量级个人XSS平台
一. 前言 决定搭建XSS平台是因为自己想深入学习一下XSS相关的知识,多多进行实践,上网搜索了一下XSS平台有很多,但是总觉得不是很安全,这个毕竟敏感信息要传输到陌生人的服务器上,而且服务器端测试代 ...
- 20155324 《Java程序设计》实验一 Java开发环境的熟悉(Windws + IDEA)实验报告
20155324 <Java程序设计>实验一 Java开发环境的熟悉(Windws + IDEA)实验报告 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用IDEA 编辑. ...