es6 在低版本瀏覽器程序報錯
安裝相關(guān)babel
// JS和loader打通
npm install babel-loader @babel/core -D
// 將es6轉(zhuǎn)化為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文件而是放到內(nèi)存杜秸，不便于我們觀察打包后的文件，所以修改package.json文件欠橘，將命令修改為普通打包,webpack.config.js中dev-tools也修改為"none"便于觀察打包后的文件
"scripts": {
"start": "webpack",
},
- 打包后的文件自動將es6編譯成了es5
babel-polyfill
- polyfill 補充低版本瀏覽器不存在的一些內(nèi)容
- 安裝
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只添加業(yè)務(wù)代碼用到的特性
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相關(guān)的配置都可以放到單獨的.babelrc文件中
修改webpack.config.js
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}
- 將options的內(nèi)容都放置到.babelrc文件
//.babelrc文件
{
"plugins": [["@babel/plugin-transform-runtime",{
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}]]
}
打包react文件
- 先安裝react相關(guān)庫
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'))
- 打包出來的文件
