書摘自 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.
    &#91;/sourcecode&#93;
    </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.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './components/App';
    
    ReactDOM.render(<App />, document.getElementById('app'));
    
  • ./src/components/App.js
    import 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.

Notice: compact(): Undefined variable: limits in /var/www/html/wp-includes/class-wp-comment-query.php on line 853 Notice: compact(): Undefined variable: groupby in /var/www/html/wp-includes/class-wp-comment-query.php on line 853

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *