webpack+react -->hello world

   首先,参考https://fakefish.github.io/react-webpack-cookbook/index.html

     讲的很好,webpack和webpack-dev-server的初步使用
    2.1节有个小bug,讲的不是很清楚,导致我弄了一天,React使用ES6+ 特性,使得开发更简单更有趣,使用JSX,使得组件的结构和组件之间的关系看上去更加清晰。但是现有环境不支持ES6,所以我们必须将ES6代码转为ES5代码,从而在现有环境执行。
    现完善一下原文的2.1小节:
首先安装几个依赖包:
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
# react转码规则$ npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
    然后,修改webpack.config.js
loaders: [
           ...
            { 
                test: /\.jsx?$/, 
                exclude: /node_modules/, 
                loader: "babel", 
                query:
                {
                    presets:['react','es2015','stage-0']
                }
            },
            ...
     现在,那npm run dev,快去看你的"hello world!"吧~~~
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,710评论 7 110
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,220评论 7 35
  • 构建一个小项目——FlyBird,学习webpack和react。(本文成文于2017/2/25) 从webpac...
    布蕾布蕾阅读 16,857评论 31 98
  • 每一颗亮晶晶的星星 都是夜里的一丝丝想念 她们说现在星光黯淡 我们要爬上高高的山巅 在月亮上采一些光 把它们都点亮。
    小二不2阅读 137评论 0 1
  • 《金刚萨埵心咒》(108遍)嗡 班扎萨埵吽发愿回向南无阿弥陀佛(10遍)愿同念佛人共生极乐国见佛了生死如佛度一切愿...
    a2b51e3b3ca4阅读 11,803评论 0 0