利用webpack搭建es6环境

原创 2016年08月31日 12:28:47

好多人看到es6得时候,都会被它吸引住,然而现在的浏览器对es6的支持还不是很完美,我也开始学习es6,也有这个浏览器支持不足的苦恼。然而有个神器叫babel的东东在es6跟es5之间搭起了一座桥梁。现在就用一个打包神器webpack来搭起一个es6转es5的环境。

首先用npm下载相关的资源

npm的步骤:
1、npm init 创建package.json文件 创建好的结果如下:

{
  "name": "webpack_es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "张弋",
  "license": "ISC"
}

2、安装相关的资源 可以用npm install [资源名] [–save]
也可以直接修改package.json,如下:

"devDependencies": {
    "babel-loader": "^6.2.5",
    "babel-core": "^6.1.2",
    "babel-loader": "^6.1.0",
    "babel-plugin-transform-runtime": "^6.1.2",
    "babel-preset-es2015": "^6.1.2",
    "babel-preset-stage-0": "^6.1.2",
    "babel-runtime": "^5.8.0",
    "webpack": "^1.12.2"
  }

最终的package.json是这个样子的:

{
  "name": "webpack_es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^6.2.5",
    "babel-core": "^6.1.2",
    "babel-loader": "^6.1.0",
    "babel-plugin-transform-runtime": "^6.1.2",
    "babel-preset-es2015": "^6.1.2",
    "babel-preset-stage-0": "^6.1.2",
    "babel-runtime": "^5.8.0",
    "webpack": "^1.12.2"
  }
}

别忘了 npm install 一下哦!

利用npm下载完相关资源之后目录结构为:
这里写图片描述

ok,到这里资源包就搞好了,so easy!

接下来在目录下新建index.js:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script src="out/bundle.js"></script>
</html>

out/bundle.js 这个文件目前是不存在的,等后面webpack配置好后自动打包生成。

建立src/entry.js 文件 以及 src/module/moduleWithES6.js文件。
其中src/module/moduleWithES6.js代码如下:

class People{
    constructor(name){
        this.name = name;
    }
    sayHi(){
        console.log('Hi '+this.name)
    }
}
export default People;

src/entry.js代码如下:

import Person from './module/moduleWithES6.js';
var p = new Person("zhangyi");
p.sayHi();

最后建立一个webpack的配置文件(webpack.config.js):

var path = require("path");

module.exports = {
    entry:'./src/entry', //输入文件
    output:{
        path:path.join(__dirname,'out'),  //输出文件路径
        filename:'bundle.js',
        publicPath:'./out/'
    },
    module:{
        loaders:[
            {text:/\.js$/,
                loader:'babel-loader',  //babel的插件
                query: {
                  presets: ['es2015',"stage-0"]
                }
            },
            {test: /\.css$/, loader: "style!css"},
            {test: /\.(jpg|png)$/, loader: "url?limit=8192"},
            {test: /\.scss$/, loader: "style!css!sass"}
        ]
    }
}

最终的目录结构:
这里写图片描述

接下来时见证奇迹的时候:
运行:webpack
这里写图片描述

没问题,然后会发现生成了输出目录out/bundle.js。
在bundle.js中你会发现代码被转成es5的语法了:

var People = function () {
        function People(name) {
            (0, _classCallCheck3.default)(this, People);

            this.name = name;
        }

        (0, _createClass3.default)(People, [{
            key: 'sayHi',
            value: function sayHi() {
                console.log('Hi ' + this.name);
            }
        }]);
        return People;
    }();

到此这个es6转es5的环境就搭建完成了,可以好好学习es6的语法了!是不是很6?稍后共享代码。

webpack搭建ES6环境

ES6环境搭建参考链接环境需求: 1. Node 2. cnpm (国内可以选择cnpm,淘宝镜像) 3. webpack 4. babel-loader (转码器)创建工程目录的结构...
  • EggDream
  • EggDream
  • 2017年06月07日 22:34
  • 586

webpack+react+es6开发环境搭建

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...
  • liuniansilence
  • liuniansilence
  • 2016年11月21日 17:07
  • 1233

【webpack】使用webpack进行ES6开发

本文主要介绍webpack的基本原理以及基于webpack搭建前端项目工程化解决方案的思路。 目录: 1、为什么要用webpack 2、webpack的安装 3、webpack的配置 4、ithub...
  • XIAOZHUXMEN
  • XIAOZHUXMEN
  • 2016年06月06日 20:09
  • 12749

webpack+ES6+less开发环境搭建(附带视频教程)

webpack是什么https://cnodejs.org/topic/571f4e785a26c4a841ecbd7c Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然...
  • sinat_17775997
  • sinat_17775997
  • 2016年09月04日 20:45
  • 8303

搭建ES6运行环境

当ES5还没有完全普及时,ES6就接踵而来了,2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015,我们也简称它为ES6或ES2015。在发布之后的将近一年内,...
  • liuhe688
  • liuhe688
  • 2016年06月06日 12:47
  • 13766

React多页面应用1(​webpack开发环境搭建,包括Babel、热更新等)

本教程总共7篇,每日更新一篇,请关注我们,敬请期待! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React...
  • oKeYue
  • oKeYue
  • 2017年12月28日 14:46
  • 145

ES6简介及Windows 环境搭建

JavaScript的历史诞生JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。时走在技术革新最前沿的Netscape(网景)公司,决定着手开发一种客户端语...
  • u011974987
  • u011974987
  • 2017年03月14日 12:21
  • 2707

从零开始,搭建基于webpack的react开发环境

利用react可以有效进行组件的开发与管理。其中webpack作为构建react组件的有效工具,可以大大提高我们的开发效率与使用效果。网上也有了很多入门文章。 但是,由于react与webpack版本...
  • forAlienZHOU
  • forAlienZHOU
  • 2016年09月07日 22:24
  • 384

webpack - 如何把es6编译成es5

目录: 配置: 需要说明的地方: 如果不用es2016,es2017,是不需要babel-preset-es2016,babel-preset-es20...
  • nbin2008
  • nbin2008
  • 2016年11月09日 22:11
  • 1557

Vue入门实战01:搭建webpack+vue开发环境

最近用webpack+vue构建了一个移动端项目,摸石头过河遇到了不少坑,看这段时间也没有更新博客了,就记录一下自己在这个项目中遇到的一些技术点,分享出来。 本篇主要分享一下利用webpack搭建v...
  • weixin_36185028
  • weixin_36185028
  • 2017年03月05日 22:43
  • 1271
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用webpack搭建es6环境
举报原因:
原因补充:

(最多只允许输入30个字)