webpack与babel

于 2022-10-25 18:24:32 发布
阅读量692 收藏 1
点赞数
分类专栏： javaScript 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gao_zhennan/article/details/127518878
版权

一、Bebal

1、 Bebal是什么

访问bebel官网（https://babeljs.io/），首页的介绍如下图所示：

在这里插入图片描述

Babel是JavaScript编译器。现今，（有了它）就可以使用下一代版本的JavaScript。

简单来说，可以将ES6代码编译为ES6之前，例如ES5、ES3等大多数浏览器可以兼容的代码。

在这里插入图片描述

2、Babel 的使用方式

（0）准备工作-安装node.js

在这里插入图片描述

NodeJS下载地址

可以运行命令node -v或npm -v，通过查看版本测试是否安装成功。

(1) 查看使用方式

使用方式

Babel的使用方式比较多，常用的方式有CLI（命令行界面）和 webpack， 如下图所示

在这里插入图片描述

CLI 命令行方式使用步骤：

先运行命令以下命令，修改node安装包仓库地址（默认是国外地址，下载包速度慢，甚至无法下载！）

npm config set registry https://registry.npm.taobao.org f

第一步：在项目文件夹下初始化项目
npm init
运行命令后，会在项目文件夹子下生成package.json文件，可以记录安装的依赖包。

第二步：安装core和cli包

下载最新版包
nmp install --save-dev @babel/core @babel/cli

指定特定版本
nmp install --save-dev @babel/core@7.11.0 @babel/cli@7.10.5

二、webpack

1、 wabpack 是什么

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

例如，<img src="https://www.xxx.com/photo> 图片资源在服务器，动态

2. webpack的使用

第一步，初始化项目
npm init

第二步，安装webpack包

npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1

第三步，配置webpack

webpack.config.js

明月几时有666
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webpack和babel
qq_25503949的博客
07-17 600
webpack和babel 一.为什么用webpack： 二.webpack环境搭建： 1》必须安装node.js 2》npm init -y -----package.json 3》npm install webpack webpack-cli -D ----node_modules package-lock.json 4》创建入口文件： src文件夹-index.js 5》新建webpack.config.js： mode：‘development’此时为开发者模式，压缩后的文件代码不是压缩的
webpack之babel讲解
coding...
05-05 2620
前言：本文演示了如何安装配置babel基本命令如何安装配置babel插件如何配置.babelrc文件如何安装配置babel预设presets正文：babel 是一个强大的js编译器，功能包括不限于：es6编译成es5语法；编译jsx语法安装配置babel首先，创建项目目录,初始化npm$ mkdir babel $ cd babel $ npm init $ mkdir src $ cd src ...
21 webpack中使用Babel
sinat_41212418的博客
12-07 1061
babel简介 目前ECMAScript 2015+版本的代码在不同的浏览器环境或者同一种浏览器的不同版本中，被支持的程度不一样。导致开发阶段需要做很多兼容处理。如果采用传统的人工兼容方式，不仅耗时耗力，而且不能够保证达到要求。 幸运的是，目前已经有许多的开源社区在做这方面的事情，只需要使用社区提供的工具或者第三方库就可以很方便实现各种运行环境的兼容，其中的佼佼者就是Babel了。 Babel是一个工具链，主要用于将ECMAScript 2015+版本的代码转换为向后兼容的JavaScript代码，使之可以
webpack5 汇总
weixin_47964837的博客
08-02 539
webpack5
webpack和babel的区别
qq_45722904的博客
08-29 256
webpack和babel
webpack和Babel解析ES6语法
zk86547462的博客
08-23 376
ECMAScript 6(ES6)的发展速度非常之快，但现代浏览器对ES6新特性支持度不高，所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。 Babel是一个广泛使用的转码器，babel可以将ES6代码完美地转换为ES5代码，所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。 官网 1.安装 npm install --save-dev babel-loader @babel/core 2.配置 module: { rules: [ { test: /\.js$/,
详解用Webpack与Babel配置ES6开发环境
12-13
此外，由于我们使用的是 Webpack，还需要安装 `babel-loader`，它是一个让 Babel 与 Webpack 结合的加载器。安装这些依赖的命令是 `$ npm install --save-dev @babel/core @babel/preset-env babel-loader`。 为了...
webpack-babel-plugin：webpack的babel插件
01-31
Webpack Babel插件安装npm i webpack-babel-plugin -D用法将插件添加到插件列表中，如下所示： import BabelPlugin from 'webpack-babel-plugin'plugins: [ new BabelPlugin ( { test : / \. js $ / , babelOptions ...
详解webpack运行Babel教程
08-27
**Webpack 运行 Babel 教程** 在现代前端开发中，我们经常使用 ES6 及以上版本的 JavaScript 语法，以提升代码可读性和开发效率。然而，这些新特性在旧版本浏览器（如 IE10）中并不支持，这时就需要借助 Babel 这个...
oilerplate-webpack-babel：Web Webpack和Babel.js入门
01-31
样板-webpack-babel :fork_and_knife: Webpack和Babel.js入门 产品特点 :white_heavy_check_mark: Webpack v4.43.0 :white_heavy_check_mark: Babel（核心） v7.10.2 :white_heavy_check_mark: 支持语法ES2015+...
webpacktest:使用Babel进行Webpack测试
05-20
启动开发服务器： npm run debug 为生产而构建： npm run build
minimal-webpack-babel-setup：使用Webpack和Babel运行JavaScript项目的最小项目设置
01-31
最小化webpack-babel设置 与前端应用程序一起运行Webpack和BabelJavaScript项目的最小项目设置。 安装git clone git@github.com:rwieruch/minimal-webpack-babel-setup.git cd minimal-webpack-babel-setup npm安装...
webpack，loader，babel以及webpack与babel-loader的关系
qq_43780814的博客
03-26 935
我们新建一个项目，会先配置webpack，然后配置babel babel是一个编译工具，实际上，babel也是可以单独使用的 webpack webpack 是一个现代 JavaScript 应用程序的静态模块打包器。（项目打包） babel babel 是一个 JavaScript 编译器。（把浏览器不认识的语法，编译成浏览器认识的语法。） babel-loader（loader之一） 用来连接webpack使用babel的加载器，真正将ES6转码的还是babel，所以还是需要安装babel.
Bebal配置说明
u010998803的博客
09-14 1239
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["&gt; 1%", "last 2 versions", "not ie &lt;= 8"] } }], &quo
Babel和Webpack打包原理学习笔记
一条吃软饭的软狗
03-13 1687
一、babel babel是一个JS编译器，用来转换最新的JS语法，比如把ES6, ES7等语法转化成ES5语法，从而能够在大部分浏览器中运行。像箭头函数，就可以做转换。babel在执行过程中，分三步：先分析(parsing)、再转化、最后生成代码。 但babel只转换语法的话，一些最新的api是不转化的，比如Object.assign， Promise等。所以babel还提供了很多插件，也就...
babel - 使用Webpack和Babel来搭建React应用程序
oscar92420aaa的博客
12-18 1547
用Webpack(npm install -g webpack)代码打包，Webpack大致需要知道三件事： 1)让Webpack知道应用程序或js文件的根目录 2)让Webpack知道做何种转换 3)让Webpack知道转换后的文件保存在哪里 具体来说，大致要做以下几件事情： 1)在项目根目录下有一个webpack.config.js文件
Webpack常见面试题
qq_25503949的博客
11-24 1184
Webpack常见面试题1.前端为何进行打包构建2.loader和plugin区别3.常见的loader和plugin4.babel和webpack的区别5.babel-polyfill和babel-runtime的区别6.webpack如何实现懒加载7.为何proxy不能被polyfill8.webpack构建流程 1.前端为何进行打包构建 （一）代码层面 （二）研发流程 2.loader和plugin区别 不同的作用 Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack
WEBPACK4.X 版本 BABEL7.X 版本配置react
weixiaoderensheng的博客
11-20 1099
package.json { "name": "webpack-skeleton", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \&quot
webpack 配合babel 将es6转成es5 超简单实例
热门推荐
现在学习也不晚
11-30 4万+
今天接触了webpack，第一次使用webpack进行转码，竟然稀里糊涂就成功了，哈哈。下面附上流程创建个文件夹，初始化一下，首先全局安装webpacknpm install webpack -g然后安装babelnpm install --save-dev babel-core babel-preset-es2015 npm install --save-dev babel-loader在当前文...
webpack中babel
最新发布
08-24
在Webpack中使用Babel是为了在项目中使用最新的JavaScript语法和功能，同时保证在旧版本浏览器中的兼容性。Babel可以将新版本的JavaScript代码转换为较旧版本的代码，以便在不支持新语法的浏览器中运行。 要在Webpack中使用Babel，首先需要安装相关的依赖。可以使用以下命令安装： ``` npm install --save-dev babel-loader @babel/core @babel/preset-env ``` 然后，在Webpack配置文件中配置Babel。假设你的Webpack配置文件名为`webpack.config.js`，可以在该文件中添加以下代码： ```javascript module.exports = { // ...其他配置项 module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] } }; ``` 上述配置中，我们通过`module.rules`数组中的一个规则来告诉Webpack当遇到`.js`文件时，使用`babel-loader`进行转译。我们排除了`node_modules`目录，因为通常不需要对第三方库进行转译。 在Babel的配置中，我们使用了`@babel/preset-env`预设，它可以根据目标环境自动确定需要转译的语法和插件。 除了以上配置外，还可以在项目根目录下创建一个`.babelrc`文件，用于存放Babel的配置项。例如： ```json { "presets": ["@babel/preset-env"] } ``` 这样，Webpack在使用Babel进行转译时，会自动读取`.babelrc`文件中的配置。 这是一个简单的Webpack配置示例，用于在项目中使用Babel。你可以根据自己的需求进行更复杂的配置，例如添加更多的Babel插件或配置不同的预设。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

明月几时有666

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值