指定模块打包命令_大前端进阶之Babel、模块化、webpack
Babel
什么是Babel?
很多ES6高级语法浏览器是不支持的,Node.js也不一定能够运行,这时就需要使用转码器了。
Babel是一个使用非常广泛的转码器,它可以将ES6语法代码转换为ES5语法代码,实现了语法的自动转换。
安装Babel
1、使用npm安装babel-cli工具。
npm install -g babel-cli #安装babel-cli
2、安装完毕后查看babel版本进行测试。
babel --version # 查看babel版本6.26.0 (babel-core 6.26.3)
测试使用
1、创建babel目录,再在该目录下创建src目录(以后我们的js代码都应该放在src目录下),在src目录下编写js源代码。
2、编写.babelrc配置文件,注意这里的"es2015"指的就是ES6语法。
{ "presets":[ "es2015" ], "plugins":[]}
3、安装babel依赖。
npm install -D babel-preset-es2015
4、转码输出测试。将src目录下的example.js转码输出到dist1目录下的dist.js中。
babel .srcexample.js --out-file .dist1dist.js
![](/assets/blank.gif)
自定义脚本
我们可以在package.json文件中配置一些自定义脚本,以后只需要在终端中执行npm run xxx命令即可执行指定的脚本。例如将我们的babel转码命令配置成自定义脚本,配置代码如下:
"scripts": { "build": "babel .srcexample.js --out-file .distdist.js" }
使用npm run build可以执行该脚本。 这里可以编写多个脚本,这样以后执行一些操作就不需要每次都输入那么长的命令了。 诸如npm run test、npm run start这种命令本质上就是一段自定义脚本,以后看到类似的启动方式,只要去找它的scripts脚本就好了。
模块化
随着互联网的发展,许多网站也一步步的互联网化了,这使得项目中的js代码也越来越多了,变得十分复杂。
我们都知道Java中可以在一个类中使用import关键字导入其他类进行调用,这样很好的实现了模块化开发。那么js是否也可以进行模块化开发呢?于是js也开始慢慢向模块化开发方向发展,后来产生了两种模块化规范:CommonJS规范和ES6模块化规范
CommonJS规范
CommonJS模块的特点如下:
- 所有代码都运行在模块作用域,不会污染全局作用域。
- 模块可以多次加载,但是只会在第一次加载时运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果。要想让模块再次运行,必须清除缓存。
- 模块加载的顺序和其在代码中出现的顺序一致。
如下代码,在导出四则运算.js文件中定义了一些四则运算的函数,我们使用CommonJS规范来将其导出。
const sum=function (a,b){ return a+b}const sub=function (a,b){ return a-b}const mul=function (a,b){ return a*b}const div=function (a,b){ return a/b}//导出这些方法供他人使用// module.exports={// sum:sum,// sub:sub,// mul:mul,// div:div// }//如果导出名称和方法名相同,可以简写module.exports={ sum, sub, mul, div}
在同一目录下创建引入测试.js文件,编写导入测试代码如下:
const m=require('./导出四则运算')console.log(m)//测试方法,正常输出const r1=m.sum(1,1)const r2=m.sub(1,2)console.log(r1)console.log(r2)
ES6模块化规范
ES6在语言标准上实现了模块功能,设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系(CommonJS只能在运行时确定),以及输入输出变量。ES6的模块并不是对象,而是通过export显示指定输出的代码,再通过import命令导入。
第一种写法
如下代码,在userApi.js文件中使用ES6模块化规范导出两个方法。
export function getList(){ console.log('获取用户列表')}export function save(){ console.log('保存用户信息')}
在userComponent.js文件中编写导入测试代码如下:
//import node不支持,需要使用babel进行转码后运行import {getList,save} from './userApi'getList();save();
第二种写法
如下代码,在userApi2.js文件中使用ES6模块化规范导出两个方法。
export default{ getList(){ console.log("获取数据列表") }, save(){ console.log("保存数据列表") }}
在userComponent2.js文件中编写导入测试代码如下:
import user from './userApi2'user.getList()user.save()
注意:Node.js不支持ES6模块化语法,因此需要使用babel进行转码再运行,上述两种写法都是如此。
webpack
什么是webpack?
webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。
简单来说就是一个前端资源打包工具,它可以把js、less、css、png等文件通通打成一个或多个js文件。这样做的好处是可以让我们的代码不那么繁琐,实现代码的复用。
webpack安装
1、使用npm安装webpack-cli工具。
npm install -g webpack webpack-cli
2、安装完毕后查看webpack版本进行测试。
webpack -v
测试使用
1、创建webpack目录并初始化项目npm init
2、在webpack目录下创建src目录,编写js代码。
3、webpack打包。
webpack --mode=development
![](/assets/blank.gif)
4、如果要打包css文件,需要先安装css-loader。除js以外的其他类型文件都需要安装相应的loader,并且需要配置对应的打包规则,详细配置规则可以查阅官网。
npm install --save-dev style-loader css-loader
然后在webpack.config.js文件中配置css打包映射规则。
const path=require('path') //Node.js的内置模块module.exports={ entry:'./src/main.js', output:{ path:path.resolve(__dirname,'./dist'), //输出路径 filename:'bundle.js' }, module:{ rules:[ { test:/.css$/, //打包规则映射到css结尾的文件上 use:['style-loader','css-loader'] } ] }}
什么是loader?
loader用于对模块的源代码进行转换。loader可以使你在import或"加载"模块时预处理文件。loader可以将文件从不同的语言(如TypeScript)转换为JavaScript,或将内联图像转换为data URL。loader甚至允许你直接在JavaScript模块中import CSS文件。
指定模块打包命令_大前端进阶之Babel、模块化、webpack相关推荐
- 大前端进阶!NodeJS、Npm、Es6、Babel、Webpack、模块化开发
文章目录 大前端进阶 一.Node.js 1.1.Nodejs介绍和安装 1.2 .Nodejs入门 1.2.1.快速入门-Hello World 1.2.2.Node - 实现请求响应 1.2.3. ...
- 【Java全栈】Java全栈学习路线及项目全资料总结【JavaSE+Web基础+大前端进阶+SSM+微服务+Linux+JavaEE】
目录 jdk api 1.8中文版 jdk api 1.8_google.CHM 零:Java 全栈知识体系 第一阶段:JavaSE 一,程序应用(★★) 二,面向对象程序设计基础(★★★) 面向对象 ...
- 狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用
参考资料 文章目录 01 大前端基础知识概述 02 概述和前端工具VSCode安装 03 Nodejs的安装 04 Nodejs了解和快速入门 05 Nodejs实现htppserver服务 06 N ...
- vue 分模块打包 脚手架_手动撸一个webpack4脚手架(仿vuecli2)
其实vue的脚手架是真的多,vue的nuxt脚手架的,vue的webpack脚手架的,还有各种gitHub上的后台管理系统模板的..... 而vue-cli2的webpack模板,这个相信是大多数人最 ...
- WordPress主题_大前端DUX主题7.1原版+优化-91apps.cn就要应用网
大前端WordPress主题_DUX主题6.8原版+优化 支持专题功能.百度收录推送.人机验证,适用于垂直站点.科技博客.个人站,扁平化设计.简洁白色.超多功能配置.会员中心.直达链接.自动缩略图 D ...
- python打包命令_三个你必须要记住的Pyinstaller打包命令——利用Python实现打包exe...
/1 前言/ 嘿,各位小伙伴,晚上好呀,我相信各位小伙伴都是python的爱好者.也许我们不一定是专业的程序员,但是我们仍然可以通过代码提高我们的效率,尽量少加班,多陪陪媳妇.再不行,让代码替我们干着 ...
- 前端进阶(二)webpack开发服务器环境配置
webpack开发服务器 webpack 使用 babel 处理高版本的 js 语法 babel 的介绍 => 用于处理高版本 js语法 的兼容性 安装包 yarn add -D babel-l ...
- Web前端进阶之JavaScript模块化编程知识
JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎.很多同学表示JavaScript涵盖的知识点太多太复杂.应用也是五花八门完全摸不着头脑.但只要我们一点一点由基础到进 ...
- 前端进阶(一)webpack 概述
webpack 概述 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系 ...
最新文章
- Javascript中的函数是第一类对象(first-class object)
- facade 提供一个接口,通过这个接口,可以使一个子系统更容易使用。
- 【福利】微信小程序130个精选Demo合集
- SpringMVC学习(一)——快速搭建SpringMVC开发环境(非注解方式)
- 【译】 Web Components 的高级工具
- java get请求简洁,java 实现 HTTP请求(GET、POST)的方法
- 如何看懂源代码–(分析源代码方法)
- 嵌入式 boa服务器移植
- Spark Scala当中reduceByKey的用法
- linux e1000e 网卡驱动,在centos7上安装intel e1000e 网卡驱动
- xml.dom.minidom 利用hbm.xml批量生成db2注释
- 【VerySky原创】怎么查找系统中的锁对象
- Strace诊断CPU跑高问题(java/php网站)
- 数据挖掘:关联分析—Apriori算法
- PyTorch-1.10(十三)--torch.optim基本用法
- Typora标题增加序号
- java用jimi.jar实现图片格式转换
- 机器学习实战--局部加权线性回归(LWR)
- 对比极米Z6X Pro和RS Pro 2,极米H5值得入手吗?极米H5评测来了
- Tektronix泰克MDO3054示波器