Webpack 4.x搭建react開發環境

時間 2019-11-06

標籤 webpack 4.x 搭建 react 開發環境欄目 React 简体版

原文原文鏈接

必要依賴一覽(npm install) 安裝好。

"dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "webpack": "^4.16.5"
    ...
}
複製代碼

babel系列是幹什麼用的呢？是爲了支持es6以上的高級語法的編譯。可是由於react有jsx這個東西存在，因此單純的babel是不夠的，此外要讓babel做用於webpack，須要給webpack添加一個loader（之前版本叫loader，4.x版本開始改用‘rules’），在工程根目錄新建webpack.config.js文件，並添加以下代碼：css

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var deps = [ 
  ];

//以上代碼能夠忽略，沒有必要不要添加noParse，由於依賴代碼中可能會有環境的判斷，而瀏覽器中是拿不到process變量的，會報錯！
var config = {
    //這裏是打包的入口
  entry: path.resolve(__dirname, './react/app.js'),
  resolve: {
    alias: {
    }
  },
  //打包完成後輸出到./build/bundle.js文件中
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js',
  },
  mode: 'development',
  module: {
      //上述的規則，loader就放在這裏，這段沒什麼好說的，從Webpack官方文檔上直接拿來用
    rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
                //剛剛下載的module之一
              presets: ['babel-preset-env']
            }
          }
        }
      ]
  }
};

//遍歷你的自定義要排除的依賴，安裝到node_modules裏的依賴通常不須要排除掉
deps.forEach(function (dep) {
    var depPath = path.resolve(node_modules, dep);
    config.resolve.alias[dep.split(path.sep)[0]] = depPath;
    config.module.noParse.push(depPath);
  });

module.exports = config;
複製代碼

以上代碼能夠直接用，請先將註釋去掉。有了以上文件配置，你能夠直接在package.json中添加scripts來打包你的app.js。html

...
"scripts": {
    ...
    "build-config": "webpack",
    ...
}
...
複製代碼

執行npm run build-config可執行打包操做，可是目前爲止仍是會報錯，由於缺乏babel設置，webpack打包時沒法識別jsx語法，什麼時jsx語法？就是在js代碼中寫的相似於dom結構的東西，以下:前端

...
<h1 onClick={this.handleClick.bind(this)} style={{ color: "red" }}>
    {'Hello ' + this.state.text}
</h1>
...
複製代碼

要解析這個東西還須要添加.babelrc文件，在其中添加：node

{
    "plugins": ["transform-react-jsx"]
}
複製代碼

這句主要是說在babel參與打包時，會啓用jsx轉換成js的插件。到這裏你已經能夠成功打出你想要的bundle.jsreact

> webpack

Hash: e716d360a6a752006c09
Version: webpack 4.16.5
Time: 973ms
Built at: 2018-08-14 15:19:14
    Asset     Size  Chunks             Chunk Names
bundle.js  715 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./react/app.js] 2.74 KiB {main} [built]
    + 21 hidden modules
複製代碼

webpack打包的好處就是這裏，可讓你的app加載速度更快，如上的包總計715kb，隱藏了沒有用到的模塊21個。這就是爲何要搭手腳架開發的理由。webpack

jsx-transform的坑

此外還有一點要說一下，就是在引入React時，請整個引入，要麼就額外引入它在編譯後的代碼中可能會用到的api，不然會說什麼什麼沒找到而致使頁面加載不出來。看編譯後的代碼：git

var _react = __webpack_require__(/*! react */ "./node_modules/react/index.js");
var _react2 = _interopRequireDefault(_react);
...
_createClass(MyTitle, [{
key: "handleClick",
value: function handleClick() {
    this.setState({
    text: "Clicked"
    });
}
}, {
key: "render",
value: function render() {
    return _react2.default.createElement(
    "h1",
    { onClick: this.handleClick.bind(this), style: { color: "red" } },
    'Hello ' + this.state.text
    );
}
}]);
複製代碼

若是你不引入react, 編譯後render()函數中的_react2會是React.createElement而React顯然是找不到這個變量的。看到編譯後的代碼，你可能更能理解，哦在jsx的dom中那樣寫原來是這個意思啊···es6

Vscode中開發，須要配置好eslint

react中有大量的es6的寫法，若是不配置eslint你會看到大量飄紅，首先是在項目的開發環境安裝依賴：github

"devDependencies": {
    ···
    "eslint": "^5.3.0",
    "eslint-plugin-import": "^2.14.0"
    ···
}
複製代碼

在項目根路徑下添加.eslintrc.json，並添加如下代碼[^eslint]：web

{
  "parserOptions": {
      //使用的ecma版本
    "ecmaVersion": 6,
    "sourceType": "module",
    //使用jsx特性
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
      //忽略console的警告
    "no-console": "off",
    "semi": ["error", "always"]
  }
}
複製代碼