react+webpack+webstorm開發環境搭建

沈子平發表於2019-02-16
ReactWebORM開發環境

前言

春節期間，更新了一下自己關於前端的知識體系，要知道對於前端技術，我還是停留在JSP，JQUERY的時代，現在專案裡面使用REACT作為前臺，所以帶著看一看的心態，看了前臺同學的腳手架，看完嚇了一跳，因為…完全看不懂.所以藉著這個機會好好的將REACT摸一遍。

先是基礎知識，首先是補了NODEJS的基礎，使用了RUNOOB的入門教程。簡單的介紹了NODE的相關模組，主要有系統檔案系統操作，WEB模組，GET&POST引數解析，以及EXPRESS框架介紹，都介紹的比較淺。

然後是有幸看到阮一峰關於REACT的部落格，主要看了ES6，Babel，Webpack, React 和 React-Route 以及 Redux。
另外關於WEBPACK，慕課的視訊教程講的也比較清晰，適合入門
統統過了一遍之後，開始建立REACT腳手架，正式上
馬(編寫Hello World)。選定REACT + WEBPACK + WEBSTORM. 話說作為windows老鐵，斷斷續續在家裡用了兩年的MAC(公司辦公還是用WIN)後，慢慢對MAC路轉粉了，作為程式設計師，MAC真的很方便。廢話不多說了，下面一步一步開始了。

安裝軟體

需要安裝node.js和npm工具，這個就不多說了，現在安裝node附帶npm了。如果你安裝了brew，直接使用brew install node即可。
使用 node -v , npm -v 檢查是否安裝完成。
安裝完成之後，記得設定NODE_PATH路徑

構建專案

  • 使用webstorm新建一個空白專案。
  • 開啟webstorm的控制檯，輸入npm init初始化一個package.json（和maven一樣，這個是npm的依賴庫描述檔案）
  • 安裝使用的庫,其中–save-dev會把下載包的相關資訊自動寫到package.json的devDependencies中，其他人只需要執行npm install就可以下載相關的依賴到當前專案中。
npm install webpack webpack-dev-server babel --save-dev
npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react react-hot-loader jquery eslint eslint-plugin-react --save-dev

專案檔案

均在當前專案資料夾下新建一下檔案/目錄

  • 新建webpack.config.js檔案
`use strict`;
var webpack = require(`webpack`);
var path = require(`path`);

//change:使用commonsplugin打包失敗，替換成htmlWebpackPlugin
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin(`common.js`);
var htmlWebpackPlugin = require(`html-webpack-plugin`);

module.exports = {

    devtool: `eval`,
    entry: [
        `./src/js/main.js`
    ],
    output: {
        path: path.join(__dirname, `dist`),
        filename: `bundle.js`,
        publicPath: `/static/`
    },
    plugins: [
        new htmlWebpackPlugin({
            template:`index.html`,
            filename:`index.html`,
            title:`webpack is good`
        })
    ],

    module: {
        loaders: [
            {
                test: /.css$/,
                loader: `style-loader!css-loader`
            },
            {
                test: /.jsx?$/,
                loaders: [`react-hot-loader/webpack`, `babel-loader`],
                exclude: /node_modules/,

            },
            {
                test: /.(png|jpg)$/,
                loader: `url-loader?limit=8192`
            },
            {
                test: /.less$/,
                loader: `style-loader!css-loader!less-loader`
            },
            {
                test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/,
                loader: "url-loader?limit=10000&mimetype=application/font-woff"
            },
            {
                test: /.(ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/,
                loader: "file-loader"
            }
        ]
    },
    resolve:{
        extensions:[`.js`, `.jsx`, `.less`, `.css`]
    }
};
  • 新建.babelrc檔案
{
  "presets": ["es2015",  "react"]
}
  • 新建.eslintrc檔案
{
  "ecmaFeatures": {
    "jsx": true,
    "modules": true
  },
  "env": {
    "browser": true,
    "node": true
  },
  "parser": "babel-eslint",
  "rules": {
    "quotes": [2, "single"],
    "strict": [2, "never"],
    "react/jsx-uses-react": 2,
    "react/jsx-uses-vars": 2,
    "react/react-in-jsx-scope": 2
  },
  "plugins": [
    "react"
  ]
}
  • 新建server.js檔案
var webpack = require(`webpack`);
var WebpackDevServer = require(`webpack-dev-server`);
var config = require(`./webpack.config`);

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    inline:true,
    historyApiFallback: true
}).listen(3000, `localhost`, function (err, result) {
    if (err) {
        return console.log(err);
    }

    console.log(`Listening at http://localhost:3000/`);
});
  • 修改package.json
"scripts": {
    "dev": "webpack-dev-server --open",
    "start": "node server.js",
    "lint": "eslint src"
  }
  • 建立src/js資料夾
  • 建立src/js/a.js
import React, { Component } from `react`;

export default class Hello extends Component {
    render() {
        return (
        <div>
        <h1>Hello, world.</h1>
        <p>this is a simple section</p>
        <p>終於搭建成功了</p>
        </div>

    );
    }
}
  • 建立src/js/main.js
import React from `react`;
import ReactDOM from `react-dom`;
import Hello from `./a`;

ReactDOM.render(<Hello />, document.getElementById(`root`));
  • 建立index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<div id="root"></div>
<%= htmlWebpackPlugin.options.title  %>
</body>
</html>

執行專案

在控制檯執行npm run start,在瀏覽器中輸入http://localhost:3000/dist/index.html，出現一下頁面，即表示腳手架搭建完成。

Hello, world.
this is a simple section
終於搭建成功了
webpack is good

相關文章