![在这里插入图片描述](https://img-blog.csdnimg.cn/9633f3bb7c3643d0a6989e51c0470ac6.gif#pic_center)
JavaScript --ES6
![](https://img-blog.csdnimg.cn/img_convert/7b0d6ba5dcce6ce6b2e732fdffde6496.gif)
W3Cschool: https://www.w3cschool.cn/escript6/escript6-m42v37eq.html.
1. Upgrade
2. Create Environment
2.1 Nodejs install
Nodejs install: https://blog.csdn.net/weixin_43916074/article/details/122999390.
2.2 Webpack
- 新建一个文件夹(项目名称es6), 进入该项目,
npm init
, 然后一路回车即可。(会生成一个package.json)- 在根目录下创建src目录,并在src目录下创建main.js
- 在根目录下创建public目录,并在public目录下创建index.html
- 在项目的根目录下执行
npm install webpack webpack-cli --save-dev
npm install webpack-dev-server html-webpack-plugin --save-dev
webpack-dev-server是启动一个本地的服务,html-webpack-plugin是一个插件,用来使用html的模板- 在根目录下创建webpack.config.js文件
- 继续安装
npm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev
2.3 Config
// 1.webpack.config.js
const path = require('path')
// 可以帮助我们在打包时生成一个html文件,并且自动引入所需文件,--save-dev开发环境安装即可
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'production',
// 定位打印代码位置
devtool: 'nosources-source-map',
// 入口
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: 9002,
// 自动启动
open: true,
// 浏览器中设置日志级别
client: {
logging: 'none'
}
}
}
// 2.package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "webpack-dev-server"
},
// 3.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 两个版本
}
]
]
}
// 4.browserslistrc文件内容
last 2 versions // 最后两个版本
> 1% // 使用权重大于1%
not dead // 没被废弃
2.4 Run
npm run serve
http://localhost:9002
现在就可以在src下的main.js中写es6代码啦
3. Grammar
4. Awakening
在一秒钟内看到本质的人和花半辈子也看不清一件事本质的人,自然是不一样的命运。