npm是前端开发中常用的一种工具,对于普通开发者来说,便于管理依赖。

往大了说,便于共享代码。写完代码,使用npm发布以后,然后别人用npm可以方便地共享到你的代码。

npm的使用:

mac环境下的安装:brew install node //node自带npm

在前端工程的根文件下,npm init --yes 会在该文件夹下生成package.json//package.json 声明了该工程的名称、版本、依赖等信息。

在该工程的根文件夹下,npm install 依赖名 --save,会安装依赖,同时把改依赖信息写入package.json当中

npm install 依赖名 --save-dev 安装开发测试环境的依赖

npm update //更新依赖

npm uninstall 依赖名 //在本地去除依赖

npm uninstall --save 依赖名 //在package.json中删除该依赖的信息

npm install -g 依赖名 //全局安装(全局指该主机的全局),可以直接在命令行中使用

npm update -g 依赖名 //依赖的更新

npm uninstall -g 依赖名 //依赖的卸载

webpack:高效的打包工具,可以把一堆js合成为一个js文件,同时生成html

使用方法:

安装:

npm install webpack -g

配置文件:

webpack.config.js

var path = require('path');

module.exports = {
entry: './app/index.js', //入口文件
output: {
filename: 'bundle.js', //生成的文件名
path: path.resolve(__dirname, 'dist') //生成文件的路径
}
};

通过npm使用webpack:在package.json内配置scripts build

{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //关键代码
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.23.1", // 大版本.次要版本.小版本 ~版本号:不低于小版本,不大于次要版本 ^版本号:不低于次要版本,不大于大版本
  "babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"html-webpack-plugin": "^2.28.0",
"webpack": "^2.2.1"
},
"dependencies": {
"lodash": "^4.17.4"
}
}

然后 npm run build就开始使用webpack进行打包

webpack把app/index.js为入口的一堆js打包合成为一个 bundle.js

更厉害的是,webpack可以将一个html模板和bundle.js合成在一起,生成一个引用了bundle.js的html文件。

生成html的方法:

安装:

npm install html-webpack-plugin --save-dev

修改webpack.config.js

var path = require('path');
var HtmlWebpackPlugin= require('html-webpack-plugin'); //声明下插件 module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins:[ //使用插件
new HtmlWebpackPlugin({
filename :'index.html', //要生成的html文件
template:'index.html' //html文件的模板
})
]
};

修改后,

npm run build 就会在dist文件夹下生成一个html文件,bundle.js文件已经引入好了。

另外前段开发过程中存在一个这样的问题:

es6(es2015和es2016)已经出了很久了,但是市面上的浏览器还不能完全兼容。

使用es5写代码就好了,但是广大程序员就是喜欢装逼用es6。为了解决这个问题,babel应运而生。babel就是能把你es6写的代码转成es5,方便浏览器兼容。

babel使用方法:

安装:

npm install babel-core babel-loader --save-dev

修改webpack.config.js的配置文件

var path = require('path');
var HtmlWebpackPlugin= require('html-webpack-plugin'); module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins:[
new HtmlWebpackPlugin({
filename :'index.html',
template:'index.html'
})
],
module:{ //添加loader
loaders:[
{
test: /.js$/, //那些文件要转化
exclude: /node_modules/, //屏蔽哪些
loader:"babel-loader" //指定loader
}
]
}
};

最后npm run build就把文件生成好了。

npm和webpack的更多相关文章

  1. D1.1.利用npm(webpack)构建基本reactJS项目

    前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# ...

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

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

  3. npm安装webpack失败(mac和window都可能会遇到这样的情况,以下问题主要以mac为例)

     问题描述:我想查看一下webpack的版本,于是输入了命令webpack -v, 结果如下图所示: 注:这里提示我们要安装webpack-cli,是因为到了webpack4, webpack 已经将 ...

  4. npm、webpack、vue-cli

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

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

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

  6. 使用npm安装webpack失败时,可能被墙要为cmd命令行设置代理

    一.搜索到的相关概念: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. npm是 Node packaged Modules(node的包管理工具).本身用n ...

  7. npm install webpack -g

    npm install webpack -g   全局安装webpack

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

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

  9. Vue.js随笔三(npm init webpack my-project指令安装失败解决方案)

    如果没有安装淘宝给的镜像就先安装一下,指令如下,对!就是如此简单: npm install -g cnpm -registry=https://registry.npm.taobao.org 首先输入 ...

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

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

随机推荐

  1. java中ThreadLocal类的详细介绍(详解)

    ThreadLocal简介 变量值的共享可以使用public static的形式,所有线程都使用同一个变量,如果想实现每一个线程都有自己的共享变量该如何实现呢?JDK中的ThreadLocal类正是为 ...

  2. Python中的三种等待时间

    一.强制等待 不论页面是否加载完成,都要等待指定时间才能执行下一步,  单位秒,time.sleep(5) import time time.sleep(10) # 强制等待10秒时间 二.隐式等待( ...

  3. 使用Aspose.word (Java) 填充word文档数据(包含图片填充)

    Aspose填充word数据 本文介绍了如何使用aspose进行word文档的生成,并提供了工具类供参考. 有问题欢迎 call 微信:905369866,小弟尽力而为..毕竟这玩意没吃透. 目录 A ...

  4. 5、react-路由

    1.单页面:(只有一个index.html)(为什么要使用react-router再react中) 所有的组件都是再同一个index.html中进行显示的,它再显示的时候是怎么显示的,通过你点击的连接 ...

  5. 【微信H5】 Redirect_uri参数错误解决方法

    1 https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx14127af0bc9fd367&redirect_uri=http ...

  6. Firefox中input元素,不能重新获取焦点函数focus()

    js校验输入框的函数: function is_number(feild) { var strRegExp = /^\d+(\.\d{1,2})?$/; if (!strRegExp.test(fei ...

  7. Redis的持久化设计

    Redis 持久化设计 持久化的功能:Redis是内存数据库,数据都是存储在内存中的,为了避免进程退出导致数据的永久丢失,要定期将Redis中的数据以某种形式从内存保存到硬盘,当下次Reids重启时, ...

  8. LinkedList竟然比ArrayList慢了1000多倍?(动图+性能评测)

    数组和链表是程序中常用的两种数据结构,也是面试中常考的面试题之一.然而对于很多人来说,只是模糊的记得二者的区别,可能还记得不一定对,并且每次到了面试的时候,都得把这些的概念拿出来背一遍才行,未免有些麻 ...

  9. Asp.Net Mvc 控制器详解

    理解控制器 控制器的角色 (1)中转作用:控制器通过前面的学习大家应该知道它是一个承上启下的作用,根据用户输入,执行响应行为(动 作方法),同时在行为中调用模型的业务逻辑,返回给用户结果(视图). ( ...

  10. excel如何快速统计出某一分类的最大值?

    问题:如何统计出某一分类的最大值? 解答:利用分类汇总或透视表快速搞定! 思路1:利用分类汇总功能 具体操作方法如下: 选中数据区任意一个单元格,然后点击“数据-分类汇总”按钮.(下图 1 处). 在 ...