知识 分享 互助 懒人建站

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

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    使用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的测试环境由懒人建站收集整理,您可以自由传播,请主动带上本文链接

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

    使用es6编写前端代码或者用于学习es6的测试环境-最新评论