加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

最新的react0.14支持ES6开发环境配置方案

发布时间:2020-12-15 04:45:10 所属栏目:百科 来源:网络整理
导读:最近研究facebook的React框架,结果发现很多文章和教程都是老的0.13版本的,而新的react多了个ReactDOM跟原来略有区别,经过多次测试和修改,终于搭建成功。为了支持es6开发,自己研究出了一个简单的webpack配置,放在这,方便自己记忆,也让新手少走弯路。
最近研究facebook的React框架,结果发现很多文章和教程都是老的0.13版本的,而新的react多了个ReactDOM跟原来略有区别,经过多次测试和修改,终于搭建成功。为了支持es6开发,自己研究出了一个简单的webpack配置,放在这,方便自己记忆,也让新手少走弯路。
首先建立 package.json 配置,通过 npm install 安装。
{
  "private": true,"scripts": {
    "dev": "webpack-dev-server --colors --inline --hot"
  },"devDependencies": {
    "babel-core": "^6.1.2","babel-loader": "^6.1.0","babel-preset-es2015": "^6.1.2","babel-preset-react": "^6.1.2","css-loader": "^0.22.0","style-loader": "^0.13.0","webpack": "^1.12.3","webpack-dev-server": "^1.12.1"
  },"dependencies": {
    "react": "^0.14.2","react-dom": "^0.14.2"
  }
然后建立 webpack.config.js,这个建立好,就可以用 npm run dev 来启动测试服务,支持热更新,来爽快的开发了。
var webpack = require('webpack');
module.exports = {
    entry: [
      "./js/app.js"
    ],output: {
        path: './build',filename: "bundle.js"
    },module: {
        loaders: [
            { test: /.js$/,exclude: /node_modules/,loader: 'babel?presets[]=es2015&presets[]=react'},{ test: /.css$/,loader: "style!css" }
        ]
    },resolve:{
        extensions:['','.js','.json']
    },plugins: [
      new webpack.NoErrorsPlugin()
    ]
};

代码地址:点这里

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读