美文网首页
webpack+react -->hello world

webpack+react -->hello world

作者: 泠泠儿 | 来源:发表于2016-05-20 10:26 被阅读0次
       首先,参考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!"吧~~~

    相关文章

      网友评论

          本文标题:webpack+react -->hello world

          本文链接:https://www.haomeiwen.com/subject/rjfnrttx.html