利用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+react搭建简单开发环境

一直想要搭一个简单的react开发环境,看了很多文章还是一头雾水,但最后还是搭了一个算是能正常工作的开发环境吧,记录一下,以防以后忘记。一些必备的安装就不说了,其实主要是package.json和we...

webpack+react+es6开发环境搭建

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

初识react之react+webpack+es6环境配置步骤整理

今天下午在朋友的帮助下,我顺利完成了react的环境安装配置,怀着激动的心情,写下这篇文章,希望能帮助更多刚进入react学习的朋友们。接下来,就进入配置吧:1. 从官网下载最新版本的Node.js安...

React+Webpack+ES6从环境搭建到HelloWorld

转载请注明预见才能遇见的博客:http://my.csdn.net/ React是一个Facebook和Instagram用来创建用户界面的JavaScript库,是现在最热门的前端框架。Webpa...
  • pcaxb
  • pcaxb
  • 2016-08-15 16:30
  • 10678

react基于webpack和babel以及es6的项目搭建

react基于webpack和babel以及es6的项目搭建项目地址https://github.com/aushion/webpack_reac_config1.打开命令提示窗口,输入mkdir r...

webpack+react+es2015轻松环境搭建,配置,运行项目

摘要: webpack的模块化,react的组件化,以及es2015的各种新特性都很吸引人,如何将他们联合起来写出让人身心愉悦的项目代码,这是本文的中心。 本文手把手教新手搭建环境创建项目,可能有的概...

es6 + webpack热更新

angular2-es6-webpack

  • 2017-02-24 08:06
  • 27KB
  • 下载

使用 Webpack 和 ES6 进行 React 开发

使用 Webpack 和 ES6 进行 React 开发 时间 2016-06-22 06:30:49  黄腾飞的个人网站 原文  http://huangtengfei.com/2016/0...

webpack + Es6 + react

  • 2016-12-25 21:30
  • 518KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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