撰寫書摘自 Traversy Media (https://www.youtube.com/watch?v=deyxI-6C2u4)
安裝套件
- 先安裝 react 相關套件
$npm install react react-dom
- 安裝 webpack 相關套件
$npm install -D webpack webpack-dev-server webpack-cli html-webpack-plugin
- 安裝 Babel 相關套件
$npm install -D babel-core babel-loader babel-preset-env babel-preset-react
- 安裝 eslint 套件
$eslint --init ? How would you like to configure ESLint? Answer questions about your style ? Are you using ECMAScript 6 features? Yes ? Are you using ES6 modules? Yes ? Where will your code run? Browser ? Do you use CommonJS? Yes ? Do you use JSX? Yes ? Do you use React? Yes ? What style of indentation do you use? Spaces ? What quotes do you use for strings? Double ? What line endings do you use? Unix ? Do you require semicolons? Yes ? What format do you want your config file to be in? JSON Local ESLint installation not found. Installing eslint, eslint-plugin-react npm WARN [email protected] requires a peer of [email protected]^4.1.1 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of [email protected]>=1.6.0 <5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of [email protected] - 4.x but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of [email protected]^2.10.2 || ^3 || ^4 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of [email protected]^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of [email protected]^6.0.0 but none is installed. You must install peer dependencies yourself. + [email protected] + [email protected] added 62 packages from 112 contributors, removed 1 package, updated 19 packages, moved 1 package and audited 11381 packages in 59.38s found 450 vulnerabilities (396 low, 34 moderate, 19 high, 1 critical) run `npm audit fix` to fix them, or `npm audit` for details Successfully created .eslintrc.json file in /Users/jerryhsieh/Developer/Web/React/my-app ESLint was installed locally. We recommend using this local copy instead of your globally-installed copy. [/sourcecode] </div> </li> </ul> </div> <div id="outline-container-orgb7e0f99" class="outline-2"> <h2 id="orgb7e0f99">管理 webpack，加入 webpack.config.js</h2> <div class="outline-text-2" id="text-orgb7e0f99"> const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, '/dist'), filename: 'index_bundle.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' }, } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }
建立最簡單 React 專案
./src/index.html<!doctype html> <html> <head> <title>My React App</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> </head> <body> <div id="app"></div> </body> </html>
./src/index.jsimport React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App'; ReactDOM.render(<App />, document.getElementById('app'));./src/components/App.jsimport React, { Component } from 'react'; class App extends Component { render() { return ( <div> <h1>My React App!</h1> </div> ) } } export default App;
修改 package.json script
{
// ...
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
}
// ...
}
執行 $npm start
$npm start > [email protected] start /Users/jerryhsieh/Developer/Web/React/react-webpack-starter > webpack-dev-server --mode development --open --hot ℹ ｢wds｣: Project is running at http://localhost:8081/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wdm｣: wait until bundle finished: /index_bundle.js ℹ ｢wdm｣: wait until bundle finished: / ℹ ｢wdm｣: Hash: 8da5da0b53b006ed833b Version: webpack 4.12.0 Time: 4014ms Built at: 2018-06-23 20:42:32 Asset Size Chunks Chunk Names index_bundle.js 1.05 MiB main [emitted] main index.html 516 bytes [emitted] Entrypoint main = index_bundle.js [./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built] [./node_modules/react-dom/index.js] 1.33 KiB {main} [built] [./node_modules/react/index.js] 190 bytes {main} [built] [./node_modules/url/url.js] 22.8 KiB {main} [built] [./node_modules/webpack-dev-server/client/index.js?http://localhost:8081] (webpack)-dev-server/client?http://localhost:8081 7.75 KiB {main} [built] [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built] [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built] [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built] [0] multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/index.js 52 bytes {main} [built] [./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.6 KiB {main} [built] [./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main} [built] [./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built] [./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1010 bytes {main} [built] [./src/components/App.js] 2.36 KiB {main} [built] [./src/index.js] 605 bytes {main} [built] + 35 hidden modules Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = index.html [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 665 bytes {0} [built] [./node_modules/lodash/lodash.js] 527 KiB {0} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {0} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built] ℹ ｢wdm｣: Compiled successfully.