webpack学习第九步——babel编译es6及react

作者: Love小六六 | 来源:发表于2020-02-14 20:08 被阅读0次

webpack学习第九步——babel编译es6及react
【xianyuit】20170810
React 技术栈系列教程(阮一峰)
React技术栈
ES6模块化
React技术栈
es6-selfnote
babel 安装错误
gulp构建es6项目
快速搭建 React + webpack + ES6 项目

es6 在低版本浏览器程序报错

安装相关babel

// JS和loader打通
npm install babel-loader @babel/core -D

// 将es6转化为es5
npm install @babel/preset-env -D

index.js用es6语法

const arr = [
    new Promise(() => {}),
    new Promise(() => {})
]

arr.map(item => console.log(item))

修改webpack.config.js

module: {
    rules: [{
        test: /\.(jpg|png|gif)$/,
        use: {
            loader: "url-loader",
            options: {
                name: '[name]_[hash].[ext]',
                outputPath: 'images/',
                limit: 2048
            }
        }
    },{
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader',
            'postcss-loader'
        ]
    },{
    // 对js文件使用babel-loader 及 @babel/preset-env
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
            presets: ["@babel/preset-env"]
        }
    }]
}

因为webpack-dev-server会不会打包build文件而是放到内存，不便于我们观察打包后的文件，所以修改package.json文件，将命令修改为普通打包,webpack.config.js中dev-tools也修改为"none"便于观察打包后的文件

"scripts": {
    "start": "webpack",
},

打包后的文件自动将es6编译成了es5

babel-polyfill

polyfill 补充低版本浏览器不存在的一些内容
安装

npm install @babel/polyfill -D

使用 @babel/polyfill

// 引入polyfill
import "@babel/polyfill"
const arr = [
    new Promise(() => {}),
    new Promise(() => {})
]

arr.map(item => console.log(item))

引入了polyfill会使打包的文件变大

修改webpack.config.js,配置属性，按需引入

module: {
    rules: [{
        test: /\.(jpg|png|gif)$/,
        use: {
            loader: "url-loader",
            options: {
                name: '[name]_[hash].[ext]',
                outputPath: 'images/',
                limit: 2048
            }
        }
    },{
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader',
            'postcss-loader'
        ]
    },{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
            presets: [["@babel/preset-env",{
                // polyfill只添加业务代码用到的特性
                useBuiltIns: 'usage'
            }]]
        }
    }]
},

配置其他属性

修改webpack.config.js

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
        presets: [["@babel/preset-env",{
            useBuiltIns: 'usage',
            targets: {
                // 大于67版本的chrome上
                chrome: '67',
            }
        }]]
    }
}

chorme67以上支持es6语法，因此打包出来也是es6语法

polyfill 全局污染问题解决

类库、ui组件库使用import "@babel/polyfill"会造成全局污染,因为polly-fill 在window上绑定了一些全局变量，而plugin-transform-runtime则使用闭包的形式

npm install @babel/plugin-transform-runtime -D
npm install @babel/runtime -D 
npm install @babel/runtime-corejs2 -D

修改webpack.config.js

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
        // presets: [["@babel/preset-env",{
        //     useBuiltIns: 'usage',
        //     targets: {
        //         chrome: '67',
        //     }
        // }]]
        
        // 使用plugin-transform-runtime
        plugins: [["@babel/plugin-transform-runtime",{
            "corejs": 2,
            "helpers": true,
            "regenerator": true,
            "useESModules": false
        }]]
    }
}

index.js不需要去import polyfill

// import "@babel/polyfill"
const arr = [
    new Promise(() => {}),
    new Promise(() => {})
]

arr.map(item => console.log(item))

打包后的文件

babelrc文件

babel相关的配置都可以放到单独的.babelrc文件中
修改webpack.config.js

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
}

将options的内容都放置到.babelrc文件

//.babelrc文件
{
  "plugins": [["@babel/plugin-transform-runtime",{
    "corejs": 2,
    "helpers": true,
    "regenerator": true,
    "useESModules": false
  }]]
}

打包react文件

先安装react相关库

npm install react react-dom -D

安装react的babel，用来解析jsx语法

npm install @babel/preset-react -D

修改.babelrc文件

{
  "presets": [
    [
      "@babel/preset-env",{
        "targets": {
          "chrome": "67"
        },
        "useBuiltIns": "usage"
      }
    ],
    // 增加react的babel
    "@babel/preset-react"
  ]
}

修改index.js

import "@babel/polyfill"
import React,{ Component } from 'react'
import ReactDom from 'react-dom'
class App extends Component {
    render() {
        return <div>hello world</div>
    }
}

ReactDom.render(<App/>,document.getElementById('root'))