標籤:import demo1 檔案的 環境 管理工具 desc 檔案名稱 ntp hot
react入門之搭配環境(一)
如果你想直接上手開發,而跳過這些搭配環境的繁瑣過程,推薦你使用官方的create-react-app命令
npm install -g create-react-app //安裝create-react-app腳手架 npm為node.js的包管理工具,請確保你已經安裝了node.jscreate-react-app my-app //使用create-react-app建立,my-app為項目名稱cd my-app/ //進入my-app目錄npm start //運行項目
現在開啟 http://localhost:3000/ 就能看到初始介面
我不大願意使用官方內建這個腳手架,是因為它的webpack配置太複雜,我比較愚鈍看不大懂,還望有大神能研究透徹分享一下。
要如何create-react-app內部的webpack設定檔解壓出來?
npm run eject
原始碼
每次看教程我都喜歡先把項目跑起來,然後再一句一句代碼地去瞭解。如果你也是:
git clone https://github.com/lingjiawen/HelloReact.gitcd HelloReact/npm installnpm run dev
一、建立項目結構
建立一個檔案夾,命名為HelloReact
順口提一下,我用的IDE是Sublime
在該檔案夾內這樣組織你的項目結構:
|--app //項目組件 |--components //組件結構 |---Hello.jsx |--main.js //入口檔案|--build //項目build檔案 |--index.html //索引html
|--.babelrc //babel轉碼工具設定檔
|--package.json //npm說明檔案,可以理解為包管理檔案|--webpack.config.js //webpack設定檔
在build/index.html中拷貝以下代碼:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>ReactDemo1</title> </head> <body> <!--插入React組件的位置--> <div id="main"> </div> <script src="bundle.js"></script> </body></html>
React代碼插入到main中,而bundle.js是webpack打包產生的js檔案,在這裡你可以先幫它記下來下文看到了再回來一看就清楚了。
在package.json中輸入以下代碼:
注意,所有的注釋都不要輸入進去!
//package.json{ "name": "HelloReact", //項目名字 "version": "1.0.0", //項目版本 "main": "webpack.config.js", "scripts": { "start": "webpack", //npm start的配置 }, "author": "", //作者 "license": "ISC", "devDependencies": { //調試依賴項 "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-plugin-react-transform": "^2.0.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "react": "^15.6.1", "react-dom": "^15.6.1", "react-transform-hmr": "^1.0.4", "webpack": "^3.4.1", }, "description": "", "dependencies": { //項目依賴項 }}
在webpack設定檔webpack.config.js中輸入以下代碼:
var webpack = require(‘webpack‘);//引入Webpack模組,注意這裡只能使用ES5文法引入module.exports = { entry: __dirname + "/app/main.js",//唯一入口檔案 output: { path: __dirname + "/build",//打包後的bundle.js檔案存放的地方 filename: "bundle.js" //打包後的檔案名稱 }, module: { //loaders載入器 loaders: [ { test: /\.(js|jsx)$/, //匹配loaders所處理的檔案的副檔名的正則,如jsx和js檔案 loader: ‘babel-loader‘ //loader的名稱 } ] }, plugins: [ new webpack.HotModuleReplacementPlugin()//熱模組替換外掛程式 ]};
.babelrc是babel轉碼器的設定檔,它能將es6代碼轉換成es5代碼,還支援react文法轉換
在.babelrc中輸入以下代碼:
//.babelrc{ "presets": [ "react", "es2015" ], "env": { "development": { "plugins": [ [ "react-transform", { "transforms": [ { "transform": "react-transform-hmr", "imports": [ "react" ], "locals": [ "module" ] } ] } ] ] } }}
在app/components/Hello.jsx中輸入以下代碼:
import React from ‘react‘; //引入react//建立組件類:名字首字母必須大寫class Hello extends React.Component { render() { return ( <div>Hello World!</div> ) }}//匯出組件export default Hello;
React 使用 JSX 來替代常規的 JavaScript。
JSX 是一個看起來很像 XML 的 JavaScript 文法擴充。
它看起來是在Javascript代碼裡直接寫XML的文法,而實質上是一個文法糖,每一個XML標籤都會被JSX轉換工具(如babel)轉換成純Javascript代碼
在app/main.js中輸入以下代碼:
//main.jsimport React from ‘react‘;import ReactDOM from ‘react-dom‘;import Hello from ‘./components/Hello.jsx‘;ReactDOM.render( <Hello />, document.getElementById(‘main‘));
二、運行項目
開啟命令列,cd到HelloReact檔案夾目錄,運行
npm install
該命令會安裝package.json的所有依賴檔案,安裝完成後,運行:
npm start
npm start命令是剛才你在package.json中定義的:
"scripts": { "start": "webpack", }
註:只有start可以省略run,其他都需要加上run,如 npm run dev;
你會發現build.js中多了bundle.js檔案,這是你在webpack.config.js中定義的打包檔案:
var webpack = require(‘webpack‘);//引入Webpack模組,注意這裡只能使用ES5文法引入module.exports = { …… output: { path: __dirname + "/build",//打包後的bundle.js檔案存放的地方 filename: "bundle.js" //打包後的檔案名稱 }, ……};
開啟該目錄下的index.html,看到以下輸出運行成功:
三、添加熱替換模組
項目已經可以運行了,但是每次輸完代碼都要npm start進行打包,想想都沒辦法忍受,這就需要用到webpack-dev-server熱替換模組,所見即所得 (WYSIWYG)
其實在前面的代碼中,為了避免麻煩,我已經偷偷將熱替換模組的部分配置加了進去
webpack.config.js中的
……plugins: [ new webpack.HotModuleReplacementPlugin()//熱模組替換外掛程式 ]……
package.json中的
"devDependencies": { …… "babel-plugin-react-transform": "^2.0.2", "react-transform-hmr": "^1.0.4", "webpack-dev-server": "^2.6.1" …… }
還有.babelrc中的
"env": { "development": { "plugins": [ [ "react-transform", { "transforms": [ { "transform": "react-transform-hmr", "imports": [ "react" ], "locals": [ "module" ] } ] } ] ] } }
你可以將這些代碼刪除,發現也是可以正常打包並運行。因為之前並沒有用到熱載入
那我現在想用,要怎麼用呢?
很簡單,在package.json中加入:
…… "scripts": { "start": "webpack", "dev": "webpack-dev-server" }……
好,現在運行一下npm run dev
開啟localhost:8080
咦,怎麼是列出檔案清單,哦哦哦,原來是沒有配置預設路徑;
…… "scripts": { "start": "webpack", "dev": "webpack-dev-server --contentBase=‘./build‘ " }……
重新運行npm run dev:
修改app/components/Hello.jsx
儲存後再回到頁面,發現頁面已經自動更新:
react入門之使用webpack搭配環境(一)