React學習筆記--程序調試

時間 2019-11-17 標籤 react 學習筆記程序調試

React學習筆記

二程序調試

前面咱們搭建好了React的基本開發環境，能夠編寫基本的React js程序了。完整的開發環境確定包含調試器，怎麼調試用React編寫的JS程序呢？有瀏覽器，好比Firefox，Chrome，按F12，找到javaScript腳本，打斷點，而後調試。這是調試JavaScript的基本環境，可是React因爲使用了ES6的語法，在瀏覽器中通過Babel解析，或者在發佈前就將React的代碼編譯成了ES5規範的JavaScript代碼，咱們調試時怎麼能調試到本身的寫的React代碼呢？javascript

前面我曾經提到使用Webpack打包發佈React程序，那麼咱們可否藉助Webpack來運行調試React程序呢？答案時確定的。html

首先咱們在項目目錄下安裝相關的Babel，Webpack模塊

npm init
npm install --save-dev webpack webpack-dev-server
npm install --save-dev react react-dom
npm install --save-dev babel-core babel-preset-react babel-preset-es2015 babel-loader babel-cli babel-plugin-transform-runtime

2.修改package.jsonjava

{
      "name": "demo1",
      "version": "1.0.0",
      "main": "webpack.config.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^6.4.1",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "react": "^15.6.2",
        "react-dom": "^15.6.2",
        "webpack": "^2.2.1",
        "webpack-dev-server": "^2.9.7"
      },
      "dependencies": {
        "react": "^15.6.2",
        "react-dom": "^15.6.2",
        "react-router-dom": "^4.2.2",
        "webpack-dev-server": "^2.4.1"
      },
      "presets": [
        "react"
      ],
      "author": "",
      "license": "ISC",
      "description": ""
}

3.項目下填加webpack.config.jsnode

module.exports = {
    devtool: 'source-map',//這個配置很重要，告訴Webpack生成map.js，只有加入此配置才能在瀏覽器中真正調試React Js
    entry: './src/test.jsx',
    output: {
        filename: './lib/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}

4..babelrc填加以下配置react

{
    "presets": ["es2015","react"],
    "plugins": ["transform-runtime"],
    "comments": true
}

5.項目子目錄src中建立test.jsxwebpack

import React from "react"
import ReactDOM from "react-dom"
var HelloMessage = React.createClass({
    render: function () {
        return <h1>Hello World！</h1>;
    }
});
ReactDOM.render(
    <HelloMessage />, document.getElementById('test') );

6.建立index.htm，其中script直接引用webpack輸出的jsgit

<!DOCTYPE html>
<html>
    <body>
      <div id="test"></div>
      <script src="../lib/bundle.js"></script>
    </body>
</html>

7.在console中的項目目錄下運行webpack,能夠看到在lib子目錄下生成了bundle.js和bundle.map.jsgithub

PS D:\DEV\react\demo1> webpack
(node:9404) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: 47d9ffef6066b3ac6378
Version: webpack 2.7.0
Time: 2131ms
              Asset    Size  Chunks                    Chunk Names
    ./lib/bundle.js  779 kB       0  [emitted]  [big]  main
./lib/bundle.js.map  942 kB       0  [emitted]         main
  [28] ./~/react/lib/React.js 4.96 kB {0} [built]
  [77] ./~/babel-runtime/helpers/typeof.js 1.07 kB {0} [built]
 [122] ./~/babel-runtime/core-js/object/get-prototype-of.js 104 bytes {0} [built]
 [123] ./~/babel-runtime/helpers/classCallCheck.js 208 bytes {0} [built]
 [124] ./~/babel-runtime/helpers/createClass.js 904 bytes {0} [built]
 [125] ./~/babel-runtime/helpers/inherits.js 1.11 kB {0} [built]
 [126] ./~/babel-runtime/helpers/possibleConstructorReturn.js 542 bytes {0} [built]
 [127] ./~/react-dom/index.js 59 bytes {0} [built]
 [128] ./~/react/react.js 56 bytes {0} [built]
 [129] ./src/test.jsx 5.21 kB {0} [built]
 [130] ./~/babel-runtime/core-js/object/create.js 94 bytes {0} [built]
 [131] ./~/babel-runtime/core-js/object/define-property.js 103 bytes {0} [built]
 [132] ./~/babel-runtime/core-js/object/set-prototype-of.js 104 bytes {0} [built]
 [137] ./~/babel-runtime/~/core-js/library/fn/object/get-prototype-of.js 125 bytes {0} [built]
 [199] ./~/react-dom/lib/ReactDOM.js 5.05 kB {0} [built]
    + 254 hidden modules

8.啓動webpack-dev-server,訪問http://localhost:8080就能夠看到helloword了。web

PS D:\DEV\react\demo1> webpack-dev-server --inline
Project is running at http://localhost:8080/
webpack output is served from /
(node:4340) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: 64a0de3cefb7972eab47
Version: webpack 2.7.0
Time: 2449ms
              Asset     Size  Chunks                    Chunk Names
    ./lib/bundle.js   1.1 MB       0  [emitted]  [big]  main
./lib/bundle.js.map  1.32 MB       0  [emitted]         main
chunk    {0} ./lib/bundle.js, ./lib/bundle.js.map (main) 1.07 MB [entry] [rendered]
  [124] ./src/test.jsx 5.21 kB {0} [built]
  [125] (webpack)-dev-server/client?http://localhost:8080 7.95 kB {0} [built]
  [130] ./~/babel-runtime/core-js/object/get-prototype-of.js 104 bytes {0} [built]
  [134] ./~/babel-runtime/helpers/classCallCheck.js 208 bytes {0} [built]
  [135] ./~/babel-runtime/helpers/createClass.js 904 bytes {0} [built]
  [136] ./~/babel-runtime/helpers/inherits.js 1.11 kB {0} [built]
  [137] ./~/babel-runtime/helpers/possibleConstructorReturn.js 542 bytes {0} [built]
  [198] ./~/react-dom/index.js 59 bytes {0} [built]
  [282] ./~/react/react.js 56 bytes {0} [built]
  [284] ./~/strip-ansi/index.js 161 bytes {0} [built]
  [285] ./~/url/url.js 23.3 kB {0} [built]
  [287] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [290] (webpack)/hot nonrecursive ^\.\/log$ 160 bytes {0} [built]
  [291] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [292] multi (webpack)-dev

9.打開firefox（本人使用firefox瀏覽器進行調試），在調試器左側資源欄中能夠找到webpack相關的資源，找到本身編寫的test.jsx，打上斷點，就能夠像調試ES5同樣調試本身寫的React代碼了。npm

React學習筆記--程序調試

React學習筆記

二 程序調試

二程序調試