如何在本地調(diào)試react的源碼

react源碼在本地是怎么調(diào)試的呢？比如說我想給react貢獻(xiàn)代碼，哪怕就是想單純的下載下來react的github上的包來調(diào)試著玩，這個(gè)開發(fā)環(huán)境怎么搭建起來呢？我并沒有沒在react項(xiàng)目的package.json中找到相關(guān)的命令。

回答

編輯回答

笑浮塵

目錄結(jié)構(gòu)

webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: __dirname + "/main.js",
  output: {
    path: __dirname + "/dist",
    filename: "[name].js"
  },
  devServer: {
    historyApiFallback: true,
    inline: true,
    hot: true,
    port: 8778
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx", ".css", ".less"]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template: "index.html",
      inject: "body"
    })
  ]
};

package.json

{
  "name": "react-project",
  "version": "1.0.0",
  "description": "A React.js Project",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --inline --hot --progress"
  },
  "author": "Gary",
  "license": "ISC",
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router-dom": "^4.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.0",
    "html-webpack-plugin": "^2.28.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.2"
  }
}

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import Index from './src/components/index.jsx';
import Other from './src/components/other.jsx';

class Main extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li><Link to="/">主頁(yè)</Link></li>
            <li><Link to="other">其他頁(yè)面</Link></li>
          </ul>

            <Route exact path="/" component={Index} />
            <Route path="/other" component={Other} />
        </div>
      </Router>
    );
  }
}

ReactDOM.render(
  <Main/>,
  document.getElementById("app")
);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A React.js Project</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

.babelrc

{
  "presets": ["es2015", "react", "stage-0"]
}

index.jsx(其他頁(yè)面或組件類似)

import React from 'react';
class Index extends React.Component {
  render() {
    return (
      <div>React 項(xiàng)目主頁(yè)</div>
    );
  }
}

export default Index;

把你想要寫的代碼都放到src目錄下就可以啦，其他的自己琢磨。這是我自己構(gòu)建的應(yīng)該算是比較簡(jiǎn)單的環(huán)境了。
如果想要看react項(xiàng)目的，去看node_modules里react-scripts里的相關(guān)文件。

2017年6月4日 21:08

編輯回答

久舊酒

1.你要是使用的webpack那種構(gòu)建方式，可以在node_modules里面react文件src里面添加debugger.
2.你要是本地簡(jiǎn)單的構(gòu)建，可以拿到未壓縮的文件，寫個(gè)組件，直接debugger看就行了。
你要研究看看源碼，建議用第二種方便一點(diǎn)。

2018年8月5日 01:59