babel和webpack结合
npx babel src --out-dir dist --presets=@babel/preset-env这是把src下面的东西都用babel转化一下
webpack可以和babel结合使用，首先下载一个这东西：
npm install babel-loader -Dwebpack配置：
const path = require('path');module.exports = {mode: 'development',entry: './src/index.js',output: {path: path.resolve(__dirname, './build'),filename: 'bundle.js',//重新打包时现将之前打包的文件夹删除clean:true},module:{rules:[{test:/\.js$/,use:{loader:'babel-loader',options:{plugins:['@babel/plugin-transform-arrow-functions','@babel/plugin-transform-block-scoping']}}}]}
}要指定对应的插件才生效
如果我们一个个的去安装使用插件就需要手动管理大量的babel插件，我们可以直接给webpack提供一个preset，webpack会根据对应的预设来加载插件列表并将其传递给babel
比较常见的预设有env、react、TypeScript
安装preset-env：
npm install @babel/preset-env浏览器兼容性
浏览器的内核都趋向于使用Blink
我们在编写css和js的时候需要考虑到浏览器的兼容性问题，但是对于前端开发者来说既要写代码又要考虑兼容性就很烦，所以急需一些工具帮助对css/js进行转化
对css进行转化的是postcss
对js进行转化的是babel
而代码要不要自动进行转化取决于要适配的浏览器，一个一个对应版本还是太麻烦了
编写一个browserslistrc配置文件可以帮助我们进行浏览器适配
也得是配让我适配的浏览器我才会给他适配
哪个热门人用的多就挑哪个
怎么知道哪个浏览器人用的多呢？看浏览器市场占有率：
"Can I use" usage table
https://caniuse.com/usage-table
超过百分之一的人用就需要做兼容了
写好配置就可以用Browserslist做兼容了（在不同的前端工具之间共享目标浏览器和Node.js版本的配置）
在开发中我们可以编写的条件：
配置browserslist可以配置 package.json也可以单独的一个配置文件.browserslistrc文件
没有配置也有默认配置，当编写了多个条件之后，多个条件之间的关系：
const path = require('path');module.exports = {mode: 'development',entry: './src/index.js',output: {path: path.resolve(__dirname, './build'),filename: 'bundle.js',//重新打包时现将之前打包的文件夹删除clean:true},module:{rules:[{test:/\.js$/,use:{loader:'babel-loader',options:{// plugins:[// '@babel/plugin-transform-arrow-functions',// '@babel/plugin-transform-block-scoping'// ]presets:["@babel/preset-env",{// 在开发中针对babel的浏览器兼容查询使用browerlist工具，而不是设置targetstargets:">5%"}]}}}]}
}推荐使用这个工具，不用targets，因为这个工具能进行统一的适配
配置的targets属性会覆盖browserslist
Stage-X的preset
ECMAScript规范定义了JavaScript如何一步步的进化、发展
TC39是指技术委员会第39号
特性的打磨发展是一步一步的：
在babel7之前（babel6中），我们经常会看到这种设置方式：
它表达的含义是使用对应的babel-preset-stage-x预设
从babel7开始不建议使用了，建议使用preset-env来设置
Babel的配置文件
我们可以将babel的配置信息放到一个独立的文件中，babel可以编写两种配置文件：
babel.config.json(或者.js , .cjs , .mjs)文件
.babelrc.json(或者 .babelrc , .js , .cjs , .mjs)文件
他们两个是由区别的：
认识polyfill
有的时候我们使用了一些语法特性，但是浏览器根本不认识这些特性必然会报错，可以使用polyfill打一个补丁，这样就包含该特性了
useBuiltlns属性设置
第三个值就是entry了
如果我们依赖的某一个库使用了某些polyfill的特性，但是我们使用的是usage之后浏览器可能就会报错
如果担心出现这样的情况可以用entry
需要在入口文件添加import 'core-js/stable'
import 'regenerator-runtime/runtime'
这样做会根据browserslist目标导入所有的polyfill，对应的包也会变大
React的jsx支持
在我们编写react代码时，react使用的语法是jsx，jsx是可以直接使用babel来转换的
对react.jsx处理需要下面的插件：
在开发中不需要一个个的安装这些插件，依然可以用preset配置
npm install @babel/preset-react -D配置自动构建：
{"name": "babel_core_demo","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},"author": "","license": "ISC","description": "","devDependencies": {"@babel/cli": "^7.27.2","@babel/core": "^7.27.4","@babel/plugin-transform-block-scoping": "^7.27.5","@babel/preset-env": "^7.27.2","@babel/preset-react": "^7.27.1","babel-loader": "^10.0.0","html-webpack-plugin": "^5.6.3"}
}
然后在webpack里配置babel：
const path = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');module.exports = {mode: 'development',entry: './src/index.js',output: {path: path.resolve(__dirname, './build'),filename: 'bundle.js',//重新打包时现将之前打包的文件夹删除clean:true},resolve: {extensions: ['.js', '.jsx'] // 这句告诉webpack自动尝试这两个后缀},module:{rules:[{test:/\.jsx?$/, //表示有0或者1个xuse:{loader:'babel-loader',options:{// plugins:[// '@babel/plugin-transform-arrow-functions',// '@babel/plugin-transform-block-scoping'// ]presets:[["@babel/preset-env", { targets: ">5%" }],"@babel/preset-react"] }}}]},plugins:[new HtmlwebpackPlugin({template:'./index.html',filename: 'end.html' })]
}这个x?已经能即处理js又处理jsx了
但是莫名其妙还是报错，加resolve是永远都搜索这俩文件
babel的配置文件：
module.exports = {presets: ['@babel/preset-env','@babel/preset-react',],};模板html：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="root"></div>
</body>
</html>index.js：
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './react/App'
//const定义常量（ES6）
const message = 'Hello World';
console.log(message);const foo = ()=>{console.log("foo function exec!");
}
foo();// 使用字符串中的includes方法
const nickname = 'coderwhy';
console.log(nickname.includes('why'));const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(<App />);最后运行webpack就会打包并且react能成功解析运行在浏览器中了
ts-loader处理ts代码
npm install ts-loader -D需要安装一下ts：
npm install -g typescript然后进行初始化：
tsc --init初始化后直接生成一个tsconfig.json
然后直接运行npm run build就可以完成编译了
使用babel-loader
除了可以使用tsc来编译TS，我们也可以使用Babel
Babel是有对TS进行支持
可以使用插件：@babel/transform-typescript
更推荐直接使用preset：@babel/preset-typescript
ts-loader和babel-loader的选择
ts-loader默认使用的是TypeScript complier
里面是不包含polyfill的
所以最好用babel-loader
使用针对ts的预设就可以解决这个问题
使用预设的好处是可以配置polyfill
module.exports = {presets: [['@babel/preset-env',{corejs: 3, // 配置使用core-js的版本useBuiltIns: 'usage', // 根据配置的浏览器兼容，以及代码中使用到的 API 进行引入 polyfill 按需加载}],'@babel/preset-react','@babel/preset-typescript',],};ts-loader会进行类型的校验，但是babel-loader就不会，所有各有各的优点
建议我们即用babel完成代码类型的转化，又使用tsc来进行类型的检查
但是我们如何使用tsc进行类型的检查呢？
我们可以在scripts中添加两个脚本用于类型检查
执行npm run ts-check可以进行ts类型检测
执行npm run ts-check-watch可以实时检测类型错误
{"name": "babel_core_demo","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","ts-check":"tsc --noEmit","ts-check-watch":"tsc --noEmit --watch"},"author": "","license": "ISC","description": "","devDependencies": {"@babel/cli": "^7.27.2","@babel/core": "^7.27.4","@babel/plugin-transform-block-scoping": "^7.27.5","@babel/preset-env": "^7.27.2","@babel/preset-react": "^7.27.1","babel-loader": "^10.0.0","html-webpack-plugin": "^5.6.3","ts-loader": "^9.5.2"},"dependencies": {"@babel/preset-typescript": "^7.27.1"}
}
