一。基础认知1

babel是js编译器,将新版本js代码转换成大多数浏览器支持的es5,es3代码

浏览器其实也不认识require函数,bable配合webpack解决模块的问题;

主要编译的是语法,es6新增api并不编译,因为本身就没有怎么转,不像箭头函数是语法可以换个语法形式,babel本身默认转不了,所以要借助模块(模块里实现了这个promise对象,实现了api),然后引进来,老版本浏览器也就有这个功能了,

模块语法指的是import export之类的;

    <script>
// 1.认识 Babel
// 官网:https://babeljs.io/
// 在线编译:https://babeljs.io/repl // Babel 是 JavaScript 的编译器,用来将 ES6 的代码,转换成 ES6 之前的代码 // 2.使用 Babel
// ES6
let name = 'Alex';
const age = 18; const add = (x, y) => x + y; // Set Map new Promise((resolve, reject) => {
resolve('成功');
}).then(value => {
console.log(value);
}); Array.from([1, 2]); class Person {
constructor(name, age) {
Object.assign(this, { name, age });
}
}
new Person('Alex', 18); import './index.js'; // 使用 Babel 编译后
('use strict'); require('./index.js'); function _instanceof(left, right) {
if (
right != null &&
typeof Symbol !== 'undefined' &&
right[Symbol.hasInstance]
) {
return !!right[Symbol.hasInstance](left);
} else {
return left instanceof right;
}
} function _classCallCheck(instance, Constructor) {
if (!_instanceof(instance, Constructor)) {
throw new TypeError('Cannot call a class as a function');
}
} var name = 'Alex';
var age = 18; var add = function add(x, y) {
return x + y;
}; new Promise(function (resolve, reject) {
resolve('成功');
}).then(function (value) {
console.log(value);
});
Array.from([1, 2]); var Person = function Person(name, age) {
_classCallCheck(this, Person); Object.assign(this, {
name: name,
age: age
});
}; new Person('Alex', 18); // 3.解释编译结果
// Babel 本身可以编译 ES6 的大部分语法,比如 let、const、箭头函数、类
// 但是对于 ES6 新增的 API,比如 Set、Map、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign/Array.from)都不能直接编译,需要借助其它的模块
// Babel 一般需要配合 Webpack 来编译模块语法
</script>

二。babel的使用方式

把这些代码输入到命令行工具即可;提前安装node;npm是和node配合使用的;

在node.js安装模块(包)(也可以叫插件)和在浏览器安装插件类似;利用npm可以安装包

npm有个网站;npm在node安装的时候已经绑定在一起了,不要要单独安装;

安装完node后,在项目目录下打开命令行工具,这样可以确保后面安装包安装到项目目录下,不需要切换目录;npm安装包之前要初始化项目

后面的一直回车即可;得到npm init的那个json文件;

我们把下面的babel包安装成开发依赖:注意两个包并没有跟版本号,默认是最新版本;

注意,安装特定版本可以防止包更新后,可能造成不适用了,所以我们指定一个稳定的版本号,这里用的是学习时课程对应的版本号,为了保持效果一致;

命令行中利用鼠标右键粘贴;

我们将第一个babel操作指导代码粘贴到命令行;执行完毕后我们看一下那个json文件;

如果安装的不是这个版本,直接再安装一次我们要的版本,覆盖即可;

再看看package.json的用法:

下面是安装完两个包后:

我们假如换了工作环境,这个包不需要拷过去,npm i等价于npm install

使用babel编译ES6代码:

项目初始化仅限于没有package.json时;

我们根据babel官网的指导继续:

把圈中代码放到package.json中,这一步叫执行编译的命令,在 package.json 文件中添加执行 babel 的命令

这个命令的意思:

我们在项目目录下创建src文件夹,创建到项目文件夹的根目录:

我们把需要编译的代码准备好:

实际开发中,不使用babel的那个在线编译,太麻烦,我们使用命令行自动编译,下面这句命令将会编译src里面的js文件,并且自动创建一个dist文件夹在src同级位置,里面也有个babel.js,这个文件就是编译后的js文件

我们发现并没有编译成功,因为还有let和const;

.babelrc就是babel的配置文件

首先我们安装一下这个包,注意这里学习,我们把版本安装成和babel/core一样的版本

安装好包后我们看到这个:这个包的作用就是告诉babel具体该怎么转换ES6的语法,因为babel本身并不知道该怎么做,前面失败的原因也就是没有这个包

安装好这个包我们再配置这个包,首先还是在项目的根目录中手动创建一个文件夹,命名为.babelrc

配置完成后,再执行build命令

三。webpack

1.基础认知

vue,react里面一些底层的配置用的也是webpack,但是vue,react只能提供的是基础配置,所以我们学习webpack,通过项目要求修改配置,定制合适的配置

webpack模块:可以处理的最小单位

从远程服务器获取到的,就叫动态的;

import不需要了就解决了兼容问题,因为import export关键字是ES6里面的,不是所有浏览器都兼容ES6语法;webpack在js文件中,看到import、require会顺着import,require后面的路径去找,然后打包,然后默认去除了import,export,require

babel将import转换成require

2.使用webpack

我们可以把自己开发的这个程序传到npm网站上,包名就是package.json的那个name名,不能和已有的webpack包名重复;

手动去改一下:然后再重新安装这两个webpack包

配置webpack作用:让webpack知道打包那些文件,放到哪,是否压缩代码,是否把ES6转换成ES5

配置文件其实也是一个模块,所以我们要把配置的东西导出去;webpack在node平台运行所以使用node模块的方式导出

我们在项目的根目录下创建webpack.config.js(默认名) 这个文件,使用node.js的模块系统导出里面的webpack配置,不用ES6的模块系统;

把圈中代码复制到配置文件中

require里面的参数path是node内置的模块;

entry的意思入口文件,从index.js那里进入

自己创建两个js文件,里面涉及ES6模块的import关键字和export关键字,我们看看通过webpack打包出去的代码是什么样的,看看还有没有import和export

下面我们编译并测试

在package.json中添加执行webpack的命令(命令就是使用webpack执行配置文件),寻找到配置文件,开始打包

先把原本json中的那个修改一下:

名字可以自定义,我们把test改成webpack,后面在控制台npm run 这个自定义的名字即可

会默认创建一个dist文件夹,然后里面有一个bundle.js代码是经过压缩混淆的;
默认不写mode属性是线上/生产的模式,我们手动指定development开发模式,这样就可以让其不压缩混淆;
指定完后把dist目录删掉,重新编译一下,也就是重新run一下,bunble.js就把index和module打包到了一起
我们来测试一下;1方法引入我们编译后的打包文件,在chrome和ie都能正常运行,如果使用2引入,ie浏览器会出问题;且这里我们没有使用babel就解决了模块的兼容性问题
webpack提供了基础操作,es6的部分高级语法,webpack打包后IE浏览器可能兼容不了,所以还是需要在项目中借助babel转化

Babel与webpack的更多相关文章

  1. babel tsc webpack

    我要用啥?js的话:babel编译+webpack模块打包ts的话:tsc编译成js+babel编译+webpack模块打包浏览器情况:如果您的浏览器支持es6所有语法那么就可以只用webpack来处 ...

  2. 前端工程化筑基-Node/npm/babel/polyfill/webpack

    00.前端搬砖框架 开发 ⇨ 构建 ⇨ 部署上线 ⇨ 摸鱼: 01.Node.js/npm Node.JS 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境,不是JS库(是C ...

  3. 使用 Babel + React + Webpack 搭建 Web 应用

    话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...

  4. ES6项目构建(babel+gulp+webpack)

    (一)基础架构 (二)任务自动化(gulp) (三)编译工具(babel,webpack) (四)代码实现 一.基础构架 1.app : 放置前端代码 css : css文件 js : js文件 cl ...

  5. Babel 处理 webpack 无法处理的 ES 语法(Babel 6.x 和 Babel 7.x 有区别)(二)

    //这是main.js是我们项目的js入口文件 //1:a导入jQuery,引入jQuery包用$变量接收,此方法与node中 const $ = require('jquery') 同 //此为ES ...

  6. 【长文详解】TypeScript、Babel、webpack以及IDE对TS的类型检查

    只要接触过ts的前端同学都能回答出ts是js超集,它具备静态类型分析,能够根据类型在静态代码的解析过程中对ts代码进行类型检查,从而在保证类型的一致性.那,现在让你对你的webpack项目(其实任意类 ...

  7. week05 codelab01 Babel ES6 webpack Nodejsserver等

    Babel 他出现的原因就是很多浏览器还未完全兼容ES6 需要将你写的ES6的内容转换成ES5让浏览器兼容运行 ES5和ES6相比出现很多新内容 比如拼接字符串 ES6可以` ` 里面如果引用变量就用 ...

  8. 使用webpack、babel、react、antdesign配置单页面应用开发环境

    这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  9. 前端笔记之ES678&Webpack&Babel(下)AMD|CMD规范&模块&webpack&Promise对象&Generator函数

    一.AMD和CMD规范(了解) 1.1传统的前端开发多个js文件的关系 yuan.js中定义了一个函数 function mianji(r){ return 3.14 * r * r } main.j ...

  10. webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 问题

    下文是网上找到的方法,是因为版本冲突的原因,参照后安装7版本解决 cnpm install -D babel-loader@ babel-core babel-preset-env 一. 问题描述 在 ...

随机推荐

  1. Stable Diffusion魔法入门

    写在前面 本文为资料整合,没有原创内容,方便自己查找和学习, 花费了一晚上把sd安装好,又花了大半天了解sd周边的知识,终于体会到为啥这些生成式AI被称为魔法了,魔法使用前要吟唱类比到AI上不就是那些 ...

  2. 基于SpringBoot实现操作GaussDB(DWS)的项目实战

    摘要:本文就使用springboot结合mybatis plus在项目中实现对GaussDB(DWS)的增删改查操作. 本文分享自华为云社区<基于SpringBoot实现操作GaussDB(DW ...

  3. 【雅礼联考DAY01】数列

    #include<cstdio> #include<map> using namespace std; typedef long long LL; const int N = ...

  4. 2020.11.30【NOIP提高A组】模拟

    总结与反思 很不幸,估分 \(170\),可惜 \(T2\) 暴力 \(50pts\) 全掉了 \(T1\) 结论题,如果想到了,\(O(n)\) 过,只有十几行代码 感觉不好想,不过还是 \(A\) ...

  5. js获取时间戳的方法

    js获取时间戳的方法 转载脚本之家: https://www.jb51.net/article/77066.htm 转载博客园八英里: https://www.cnblogs.com/deepalle ...

  6. Mybatis plus 查询

    1.子查询 // 管理主管查询 Integer manageSupervisor = query.getManageSupervisor(); if (manageSupervisor != null ...

  7. 修改文件名或文件内容编码-convmv

    问题的出现 开发小伙伴把之前运行在windows server上的项目迁移到ubuntu上之后出现了中文乱码的问题,分析其原因是代码中创建文件未指定编码,所以就自动匹配了操作系统的编码,也就是从GBK ...

  8. 第七周作业-N67044-张铭扬

    1. 说明自动化运维的路径,原理,实践方法. 所谓自动化运维是指通过将日常IT运维中大量的重复性工作(小到简单的日常检查.配置变更和软件安装,大到整个变更流程的组织调度)由过去的手工执行转为标准化.流 ...

  9. Day 24 24.1:逆向分析1 - Steam案例

    STEAM逆向分析 url:https://store.steampowered.com/login/?redir=&redir_ssl=1 分析思路: 输入用户名和密码后,点击登录按钮,通过 ...

  10. PO培训

    30M 的step by step.带notes  这个文档把常用的包含java都有 不止是配置,反正各种处理都有.. 各种高清无码截图,还不算附件内容