ECMAScript 6环境搭建-CFANZ编程社区

ECMAScript 6环境搭建

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

控制台预览效果
ECMAScript 6环境搭建_package

0 条评论