ECMAScript 6已应用到react框架中,为了研究学习react,今天开始先学习es6基础,先从搭建环境开始,由于我电脑已安装nodejs,不再安装node和npm
先打开cmd命令行窗口,创建文件加es6test
md es6test
1、先创建package.json文件
npm init
package.json文件为
{
"name": "es6test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
//安装好其他组件再回来配置
"start": "./node_modules/.bin/webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.1"
}
}
2.安装需要工具,安装在项目开发依赖里面,es6test目录内
npm install webpack
npm install webpack-dev-server
npm install babel-cli //提前装上版本容易引起错误
npm install babel-core
npm install babel-loader
npm install babel-preset-env
3 .创建webpack.config.js文件
//导入包
const webpack = require('webpack')
module.exports = {
//人口文件,引入js文件
entry: './script.js',
//输出文件
output: {
filename: './bundle.js',
},
//设置服务器端口
devServer: {
inline: true,
port: 8888
},
//设置使用模块
module: {
rules: [ {
test: /\.js?/, //判断一下是不是js文件
exclude: /node_modules/, //排除特定目录下的js文件
use:{
loader: 'babel-loader', //处理js文件
options:{
presets: ['env'] //设置babel预设
}
},
}]
}}
4 创建一个babel配置文件.babelrc
"presets":["env"]
}
5.创建script.js文件
const obj = {
greeting:'hello ',
name:'es6'
}
const{greeting,name}=obj
console.log(greeting,name)
6.创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src = './bundle.js'></script>
</body>
</html>
最后启动服务器,
npm start
控制台预览效果