郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

懒人建站提供网页素材下载、网站模板
这一切都是免费的!
当前位置:懒人建站 > javascript教程 >

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

来源:懒人建站工作室 作者: 懒人建站 日期: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>
本文链接:使用es6编写前端代码或者用于学习es6的测试环境http://www.51xuediannao.com/javascript/es6_test.html

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

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

(责任编辑:懒人建站)

上一篇:vue.js2.0自定义过滤器

下一篇:没有了