前言:最近想要系统的复习一下ES6,故搭建一个环境。
1.目录构成
首先,我们新建除node_modules和package.json外的文件(.prettierrc这个是我的代码格式,可以不用配),然后npm init生成package.json文件。
// .babelrc文件内容
{
"presets": [
[
"@babel/preset-env",{
// 将 useBuiltIns 改为 "usage",babel 就可以按需加载 polyfill
// 并且不需要手动引入 @babel/polyfill
"useBuiltIns":"usage",
"corejs":3
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs":3 // 指定 runtime-corejs 的版本,目前有 2 3 两个版本
}
]
]
}
// .browserslistrc文件内容
last 2 versions // 最后两个版本
> 1% // 使用权重大于1%
not dead // 没被废弃
// webpack.config.js文件内容
// 所有输出文件的目标路径
const path = require('path')
// 可以帮助我们在打包时生成一个html文件,并且自动引入所需文件,--save-dev开发环境安装即可
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'production',
// 入口
entry: {
app: './src/main.js'
},
// 出口
output: {
// __dirname当前文件所在目录(*目录)
// resolve是路径相对转为绝对,也可以使用join
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
// 插件
plugins: [
new HtmlWebpackPlugin({
// 配置模版属性,复制一份到打包后的dist文件里面
template: './public/index.html'
})
],
// module来配置解析文件
module: {
rules: [
{
// 文件类型
test: /\.m?js$/,
// 排除文件
exclude: /node_modules/,
// 使用loader
use: 'babel-loader'
}
]
},
// 配置本地网络
devServer: {
// 端口号
// port: 8000,
// 自动启动
open: true,
// 浏览器中设置日志级别
client: {
logging: 'none'
}
}
}
2.安装对应的loader和plugin
npm install
webapck webpack-cli
webpack-dev-server
html-webpack-plugin
babel-loader
@babel/core
@babel/preset-env
@babel/plugin-transform-runtime --save-dev
npm install
@babel/polyfill
@babel/runtiome core-js
@babel/runtime-corejs3 --save
3.配置启动
// package.json文件
"scripts": {
"serve": "webpack-dev-server",
"build": "webpack"
},
控制台输入npm run serve成功启动项目
4.测试
在main.js中写一点es6代码,我们试试看
// main.js文件
const NUM = [1, 2, 3, 4]
const ARR = NUM.map((item) => {
return item
})
console.log(ARR, '11')
下一篇文章会汇总练习下es6多数特性!!
水平有限,还不能写到尽善尽美,希望大家多多交流,跟春野一同进步!!!