当前位置：懒人建站 > javascript教程 > 使用es6编写前端代码或者用于学习es6的测试环境

使用es6编写前端代码或者用于学习es6的测试环境

作者：佳明妈来源：lanren 2017-02-26 人气：

使用es6编写前端代码或者用于学习es6的测试环境，环境需要nodejs和webpack和babel，配置简单，跟着步骤走就能成功了

1、nodejs安装

到nodejs官方网站下载：https://nodejs.org/en/ 安装没啥说的，一路next，这一步安装完毕才可以进行下面的操作，
下面的操作，如果是windows环境的话就是运行 -- cmd 的命令窗口执行的。(需要cd到项目根目录)

2、webpack的安装

npm install webpack -g 
npm install webpack --sava-dev

3、babel的安装

使用 babel 对 ES6 风格的代码进行转换，所以要安装babel-loader 加载器，在命令行输入如下命令：

//安装 babel-loader  
npm install --save-dev babel-cli babel-preset-env
npm install --save-dev babel-loader
npm install --save-dev babel-core babel-preset-es2015

4、webpack配置

项目根目录新建 webpack.config.js，编辑如下：

module.exports = {
    entry: {"app":"./src/app.js"},
    output: {
        path: "./dist",
        filename: "app.js"
    },
    module: {
        loaders: [
            {
                test: /.js$/,
                use: ['babel-loader'],
                exclude: /node_modules/
            }
        ]
    }
};

module.exports导出的对象即是 webpack 的配置对象

5、执行转码命令

在项目webpack.config.js同目录，通常就是项目的根目录，执行命令 webpack es6就转换成es5代码了。
如果你不想每次都去执行一下 webpack 的话，你可以使用 webpack -w 命令，可以监听js变化，js有变化就会自动转码
webpack //执行一次
webpack -w //执行一次后可以实时监听js变化

6、相关测试代码

src/app.js

let a = [1,2,3];
let b = [3,5,...a]; //来个es6语法，就是把 let a = [1,2,3]; 展开 合并到 b 中
console.log(b);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试页面</title>
</head>
<body>
    <script src="dist/app.js"></script>
</body>
</html>

【本文由“lanren”发布，2017年6月17日】

↓ 查看全文

本文链接：使用es6编写前端代码或者用于学习es6的测试环境https://www.51xuediannao.com/javascript/es6_test.html

使用es6编写前端代码或者用于学习es6的测试环境由懒人建站收集整理，您可以自由传播，请主动带上本文链接

懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。