本文将要介绍 webpack,Babel,babel-loader 的关系. 理清楚他们各自做了什么事情.
通常我们新建一个项目, 会先配置 webpack, 然后配置 babel;babel 是一个编译工具, 实际上, babel 也是可以单独使用的.
下面我们从 Babel 出发, 简单配置一个 react 项目, 来清晰认识一下 webpack 和 babel 的关系.
Babel 和 Webpack 简介
Babel 是一个 JavaScript 编译器.(把浏览器不认识的语法, 编译成浏览器认识的语法.)
webpack 是一个现代 JavaScript 应用程序的静态模块打包器.(项目打包)
下面会用到的:
名称 | 描述 |
---|---|
@babel/cli | Babel 附带了一个内置的 CLI,可用于从命令行编译文件。 |
@babel/core | 使用本地配置文件 |
@babel/preset-env | 编译最新版本 JavaScript |
@babel/preset-react | 编译 react |
@babel/polyfill | 通过 Polyfill 方式在目标环境中添加缺失的特性 |
@babel/plugin-proposal-class-properties | 编译 class |
开始配置
新建项目
mkdir babel-in-webpack
进入项目
cd babel-in-webpack/
初始化 NPM
NPM init
不用管提示, 一顿回车键. 然后会生成一个文件 package.JSON
配置 Babel
安装 Babel 相关依赖
NPM install --save-dev @babel/cli @babel/core @babel/preset-env @babel/polyfill
新建文件 babel.config.JSON
- {
- "presets": [
- "@babel/preset-env"
- ],
- "plugins": []
- }
新建文件夹 src,src 内新建文件 test.JS, 随便写点啥 es6 语法.
使用下面命令编译
./node_modules/.bin/babel src --out-dir lib
编译完会新增目录 lib, 里面放着编译好的文件
配置 React
安装 Babel 编译 React 的依赖
NPM install --save-dev @babel/preset-react @babel/plugin-proposal-class-properties
babel.config.JSON 添加 React 相关配置
- {
- "presets": [
- "@babel/preset-env",
- "@babel/preset-react"
- ],
- "plugins": [
- "@babel/plugin-proposal-class-properties"
- ]
- }
安装 React 相关依赖
NPM install --save react react-dom
src 下新增 react 文件 main.JS
- import React from 'react';
- import ReactDOM from 'react-dom';
- class App extends React.Component {
- render() {
- return (
- <div>Hello World!</div>
- )
- }
- }
- ReactDOM.render(<App />, document.getElementById('root'));
运行命令编译
./node_modules/.bin/babel src --out-dir lib
编译完成后 lib 下多了一个 main.JS
看起来编译很成功, 我们在 lib 下面新建一个 html 引入 main.JS 看看效果
报错, 浏览器不认识 require, 继续往下看.
配置 webpack
安装 webpack 依赖
NPM install --save-dev webpack webpack-cli
根目录新建文件 webpack.config.JS
- const path = require('path');
- module.exports = {
- entry: './src/main.js',
- output: {
- path: path.resolve(__dirname, 'dist'),
- filename: '[name].js'
- }
- };
在 package.JSON 的 scripts 中加入命令
"build": "webpack --mode development",
运行命令
NPM run build
webpack 不认识 react 语法, 在 webpack.config.JS 中加入 babel-loader.
- const path = require('path');
- module.exports = {
- entry: './src/main.js',
- output: {
- path: path.resolve(__dirname, 'dist'),
- filename: '[name].js'
- },
- module: {
- rules: [
- { test: /\.JS$/, use: 'babel-loader' }
- ]
- },
- plugins: []
- };
安装依赖 babel-loader
NPM install --save-dev babel-loader
运行命令
NPM run build
会看到 dist/main.JS, 写个 HTML 引入试试
两种编译结果对比
我们来看 Babel 编译结果 lib/main.JS 和 webpack 编译结果 dist/main.JS, 发现 Babel 仅仅是将 src/main.JS 的 react 语法编译成了 JS 语法, 而 webpack 将 src/main.JS 和引入的 node_modules 融合后用 Babel 编译.
浏览器不认识 require,webpack 实现了一套浏览器认识的 require.
总结
Babel 是编译工具, 把高版本语法编译成低版本语法, 或者将文件按照自定义规则转换成 JS 语法.
webpack 是打包工具, 定义入口文件, 将所有模块引入整理后, 通过 loader 和 plugin 处理后, 打包输出.
webpack 通过 babel-loader 使用 Babel .
代码地址: GitHub https://github.com/whosMeya/babel-in-webpack
来源: https://www.cnblogs.com/whosMeya/p/12535654.html