借助babel和webpack es6语法写react

2019年9月15日 125次阅读 来源: luckyyulin

注明: 本文为翻译文章 翻译原文

借助babel和webpack es6语法写react

环境

  • react & react dom

$ npm i --save-dev react react-dom

  • webpack & webpack-dev-server

webpack: 打包js成一个bundle
webpack-dev-server: 开发web 服务器

$ npm i --save-dev webpack
$ npm install webpack-dev-server -g

  • babel

npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react

  • package.json

{
  "name": "todolist",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "webpack-dev-server --colors --process"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^2.6.1"
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

  • .babelrc

{
  "presets": ["react", "es2015"]
}

代码

  • webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './main.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,// 文件过滤规则
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']// es2015 处理 ES6 语法，react 处理 jsx 语法
        }
      }
    ]
  },
};

  • hello.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}

ReactDOM.render(<Hello/>, document.getElementById('hello'));

  • main.js

import Hello from './hello.jsx';

测试

  • 开启服务

$ webpack-dev-server --progress --colors

  • 引用bundle

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello React</title>
  </head>
  <body>
    <div id="hello"></div>
    <script src="bundle.js"></script>
  </body>
</html>

遇到的问题

  • 全局安装webpack-dev-server过后，在项目根目录下运行$ webpack-dev-server 报以下错误:

    throw err;
    ^

Error: Cannot find module 'debug'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/usr/local/lib/node_modules/webpack-dev-server/node_modules/finalhandler/index.js:14:29)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

发现直接在任意目录下运行$ webpack-dev-server 都会出现上面的报错，其实是webpack和webpack-dev-server版本不匹配导致的（其实在全局安装webpack-dev-server的时候控制台已经开始报npm warning了，以后使用npm install的时候需要注意控制台报的警告和报错），然而安装webpack-dev-server匹配的版本webpack，发现根本识别不到webpack的安装，遂更新npm: $ sudo npm install -g npm，然而在项目目录下运行webpack-dev-server又出现另外一个错误:

module.js:471
    throw err;


    ^

Error: Cannot find module 'loader-runner'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/baidu/Documents/learn/react-redux/demo/todolist/node_modules/webpack/lib/NormalModule.js:25:44)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

以上报错是因为全局安装了webpack-dev-server，本地也安装了webpack-dev-server导致冲突，遂删除项目目录下的node_modules/*，重新安装依赖 $ npm i

附加: 如果遇到其他问题，有可能是端口被占用

提示

全局安装的webpack和webpack-dev-server均为1.x.x

示例

以下在mac命令行中运行

# 克隆项目
$ git clone https://github.com/doudounannan/react-redux.git
$ cd react-dedux
$ git checkout webpack-babel-es6-react
$ cd demo/webpack-babel-es6-react
$ npm run build
# webpack开始编译成一个bundle.js

通过http://localhost:8080/webpack…访问

    原文作者：luckyyulin
    原文地址: https://segmentfault.com/a/1190000009937127
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞