npm(了解)+Babel转码器+模块化+webpack打包
目录
介绍
设置镜像导入依赖
其他命令
Babel转码器
模块化
es6怎么做模块化
webpack
webpack的使用
介绍
一个包的管理工具,类似与Maven,用于前端中管理JS的依赖
查看版本:
我们使用npm创建一个类似与Maven的工程
终端输入npm init -y初始化命令创建工程——>得到package.json(类似pom.xml)
设置镜像导入依赖
npm config set xxx
npm config list查看配置信息
下载Jquery
->npm install jquery
下载完后多个jq包和package-lock.json(锁定当前使用的版本)
其他命令
我们可以根据配置文件xxx.json初始化加载依赖
npm install (注意在当前工程中运行)
npm install --save-dev eslint:当前工程下载依赖,局部
下面的是全局安装
Babel转码器
作用:es6转为es5解决兼容性问题
这里有个坑
npm下载Babel后查看version提示无法加载源文件
无法加载的可以用管理员身份运行PowerShell,执行:set-ExecutionPolicy RemoteSigned 输入Y就行了
npm install --global babel-cli#查看是否安装成功
babel --version
Babel的使用:
1.初始化项目
2.创建文件,里面写es6
3.转码一定要配置.balbelrc配置文件
Babel的配置文件是.babelrc,存放在项目的根目录下,该文件用来设置转码规则和插件,基本格式如下
4.安装转码器
npm install --save-dev babel-preset-es2015
5.转码
# 转码结果写入一个文件mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js
# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2
模块化
简而言之,就是js与js之间的调用就是模块化(前端)
后端就是类与类之间的调用
1.模块规范
每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。
2.导出模块中的成员,其它模块进行调用
3导入模块(这里是另一个js文件)
然后运行即可
node xxxx.js
es6怎么做模块化
1.创建模块
//创建
export function getList() {console.log('获取数据列表')
}
export function save() {console.log('保存数据')
}
注意,es写法实现模块化操作,在nodejs下是不能直接运行的,需要使用bebel将es6转为es5代码才能运行
2.导出模块
//调用01.js的方法
import m from "./01.js"//调用方法
m.getList()
m.save()
3.然后运行node xx.js即可
记得要安装babel
webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。
意思就是可将多个文件打包为一个
作用: 打包工具,帮助把多个静态资源文件打包成一个文件,减少了页面的请求
webpack的使用
1.进行安装
npm install -g webpack webpack-cli
2.进入webpack文件初始化项目
npm init -y
3.然后创建webpack配置文件,配置打包信息
三部分:配置打包的文件入口+输出的路径(到哪个文件夹下)+打包输出的文件名
common.js:
//创建export方法表示能够被别人调用
exports.info = function (str) {console.log()document.write(str);//浏览器输出
}
utils.js
exports.add = function (a, b) {return a + b;
}
main.js导入前面两个模块
const common=require('./common')
const utils=require('./utils')//引入css
require('./style.css')//进行调用
common.info('hello common'+utils.add(1,2))
4.然后进行打包
以下配置的意思是:读取当前项目目录下src文件夹中的main.js(入口文件)内容,分析资源依赖,把相关的js文件打包,打包后的文件放入当前目录的dist文件夹下,打包后的js文件名为bundle.js
//webpack打包的配置文件
const path = require("path"); //Node.js内置模块
module.exports = {entry: './src/main.js', //配置入口文件output: {path: path.resolve(__dirname, './dist'), //输出路径,__dirname:当前文件所在路径filename: 'bundle.js' //输出文件},module:{rules: [ { test: /\.css$/, //打包规则应用到以css结尾的文件上use: ['style-loader', 'css-loader']} ] }}
5.执行打包命令
webpack #有黄色警告
webpack --mode=development #没有警告
#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩
npm(了解)+Babel转码器+模块化+webpack打包相关推荐
- 项目中配置Babel转码器的详细教程
先简单说一下Babel吧 Babel是一个ES6转码器,可以将ES6代码转为ES5代码 此篇教程是在学习阮老师的<ES6标准入门>时,不会npm的学习总结 在阮老师的教程上具体补充,通过以 ...
- es6 Babel 转码器对修饰器的支持
Babel 转码器对修饰器的支持 目前,Babel 转码器已经支持 Decorator. 首先,安装babel-core和babel-plugin-transform-decorators.由于后者包 ...
- ES6学习(一)— Babel转码器的使用和配置
ES6学习(一)- Babel转码器的使用和配置 Babel转码器 Babel是一个广泛使用的ES6转码器,可以将ES6代码转化为ES5代码从而在老版本的浏览器进行. 这意味着,你可以使用ES6的方式 ...
- 解决VScode安装Babel转码器报错:无法将“cnpm“项识别为cmdlet\函数、脚本文件或可运行程序的名称的问题
解决VScode安装Babel转码器报错:无法将"cnpm"项识别为cmdlet\函数.脚本文件或可运行程序的名称的问题 报错结果如下: 解决方案 第一步:安装npm 点我安装np ...
- es6 babel转码器安装配置
es6 babel转码器安装配置 例如:桌面上新建个文件夹es6,文件夹里新建一个文件es6.js. 打开小黑窗进入文件夹.(windows要以管理员的方式打开cmd) 1.先全局安装babel-cl ...
- 学习笔记—babel转码器,babel是什么
babel 转码器 es6是2015年6月开始正式创立,所以一些老浏览器并不能解析es6的语法,babel转码器应运而生,可以将es6的代码转译为es5代码. 安装babel: npm install ...
- ES6转码(编译)工具——Babel转码器、Traceur转码器
当ES6不兼容时,需要用到转码工具 1.Babel转码器: Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以用ES6的方式编写程序,又不用 ...
- 常见的ES6转码(编译)工具——Babel转码器、Traceur转码器
在浏览器里面如何使用? 现在ES6的使用也是一个新趋势,下面就来讲解转码的常见方法 当ES6不兼容时,需要用到转码工具 1.Babel转码器: Babel是一个广泛使用的ES6转码器,可以将ES6代码 ...
- Babel转码器详解
Babel转码器详解 Babel是一个广为使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境运行.这意味着可以用ES6的方式编写程序而不用担心环境是否支持 Babel的配置文件 ...
最新文章
- java SE8 和 jdk1.8的关系 java版本号
- 结构体的嵌套 自身嵌套 相互嵌套
- python导入csv文件是如何预览后10行-使用python中的csv reader只读取前N行csv文件
- python资源百度云_Python Selenium 百度云分享链接资源 批量保存
- 第六章-template模板
- yii2中的事件和行为
- 数据结构探险——线性表篇
- React Native工程修改Android包名
- 暑期训练日志----2018.8.19
- 小镇青年经济:从10亿票仓到PKQ横空出世
- 关于解决IAR安装卸载后无法再次破解的问题
- visio:没有“形状”界面
- 详解三极管NPN与PNP区别
- windows2012运行linux,在 Windows Server 2012 R2 Hyper-V 上提供 Linux 支持
- Windows Sockets错误码方案
- Vue报错记录——无法找到app
- 蒙特卡罗树搜索法c语言,蒙特卡罗方法的计算方法
- 输出字符的 ASCII 码
- DC/DC电源输入输出滤波电容摆放位置
- ArcGIS教程:创建饼图