本文标识 : V00017
本文编辑 : Jack 风
编程工具 : WebStorm
阅读时长 : 5分钟
nrm
的安装使用作用:提供了一些最常用的NPM包镜像地址,能够让我们快速的切换安装包时候的服务器地址;什么是镜像:原来包刚一开始是只存在于国外的NPM服务器,但是由于网络原因,经常访问不到,这时候,我们可以在国内,创建一个和官网完全一样的NPM服务器,只不过,数据都是从人家那里拿过来的,除此之外,使用方式完全一样;
npm i nrm -g
全局安装nrm
包;nrm ls
查看当前所有可用的镜像源地址以及当前所使用的镜像源地址;nrm use npm
或nrm use taobao
切换不同的镜像源地址;注意:nrm 只是单纯的提供了几个常用的 下载包的 URL地址,并能够让我们在 这几个 地址之间,很方便的进行切换,但是,我们每次装包的时候,使用的 装包工具,都是 npm
【这是在webpack中定义组件的方式,推荐这么用】
webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;
npm i webpack -g
全局安装webpack,这样就能在全局使用webpack的命令npm i webpack --save-dev
安装到项目依赖中npm init
初始化项目,使用npm管理项目中的依赖包cnpm i jquery --save
安装jquery类库main.js
并书写各行变色的代码逻辑: // 导入jquery类库
// 感谢关注公号/ A2Data
import $ from 'jquery'
// 设置偶数行背景色,索引从0开始,0是偶数
$('#list li:even').css('backgroundColor','lightblue');
// 设置奇数行背景色
$('#list li:odd').css('backgroundColor','pink');
main.js
会报错,因为浏览器不认识import
这种高级的JS语法,需要使用webpack进行处理,webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法;webpack 入口文件路径 输出文件路径
对main.js
进行处理:webpack src/js/main.js dist/bundle.js
webpack.config.js
webpack.config.js
中配置这两个路径: // 导入处理路径的模块
var path = require('path');
// 导出一个配置对象,将来webpack在启动的时候,会默认来查找webpack.config.js,并读取这个文件中导出的配置对象,来进行打包处理
module.exports = {
entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
output: { // 配置输出选项
path: path.resolve(__dirname, 'dist'), // 配置输出的路径
filename: 'bundle.js' // 配置输出的文件名
}
}