久亚洲精品天堂,人人澡人人妻人人,亚亚洲综合激情网

webpack運(yùn)行項(xiàng)目知識(shí)

項(xiàng)目初始化

git init：將本地文件夾變成git可以管理的倉庫；
- 開發(fā)過程中，要通過git工作流，把項(xiàng)目傳到遠(yuǎn)程的github上去；
- git工作流
npm init --y:包管理器項(xiàng)目初始化
- 創(chuàng)建package.json文件；

配置文件分析

.babel:用來配置babel; babel的主要作用是用來編譯；把不支持的語言，編譯成支持的語言；
- 要使用babel:必須下載工具：babel-cli babel-core
- 支持es6:
  - babel-loader（編譯js文件,讓JS文件可以運(yùn)行）(注明下載7.1.5版本，否則會(huì)報(bào)錯(cuò))
  - babel-preset-es2015（編譯es6，讓es6語法編譯成es5）
  - babel-preset-stage-0（支持箭頭函數(shù)：保證this指向）
- 支持react
  - babel-preset-react（支持react）
webpack.config.js：配置webpack;
- webpack（本地運(yùn)行）
- webpack-dev-server（服務(wù)器運(yùn)行）
- webpack-cli
下載html-webpack-plugin：用于html模板；
.gitignore:在把項(xiàng)目用github管理的時(shí)候，忽略掉哪些文件上傳；
- 不傳第三方插件；如node_modules;

項(xiàng)目結(jié)構(gòu)

項(xiàng)目結(jié)構(gòu)：分為三塊：
- 自己封裝的自定義的模塊組件，如Header.js,Footer.js；
- 裝所有組件的容器，如index.js；
- 頁面html文件，將組件容器引入，如index.html;

解決問題

在JS文件中通過es6引入模塊，會(huì)出現(xiàn)報(bào)紅的問題；通過以下設(shè)置解決
- 設(shè)置setting->Languages&Frameworks->JavaScript->JavaScirpt language version->React JSX

項(xiàng)目開發(fā)總結(jié)

把項(xiàng)目變成git可以管理的倉庫，同時(shí)，初始化項(xiàng)目
- git init
- npm init --y
當(dāng)前項(xiàng)目文件的創(chuàng)建
- .gitignore：忽略給github上傳哪些文件；
- .babelrc：編譯：把不兼容的編譯成兼容的；
- webpack.config.js：webpack的配置；
- README.md：當(dāng)前項(xiàng)目的說明文件；
- src文件夾：目錄下創(chuàng)建
  - component文件夾，存放自定義的模塊組件；
  - index.html
  - index.js
安裝必要的插件
- babel
  - npm i --save-dev
    - babel-core: 工具
    - babel-cli: 工具
    - babel-loader:運(yùn)行JS，注：下載版本為7.1.5,最新版本會(huì)報(bào)錯(cuò)；代碼：npm i --save-dev babel-loader@7.1.5；
    - css-loader:運(yùn)行css
    - style-loader:運(yùn)行css
    - babel-preset-es2015: 編譯e``s6，讓es6語法編譯成es
    - babel-preset-stage-0: 支持箭頭函數(shù)：保證this指向
    - babel-preset-react: 支持react;
- webpack
  - npm i --save-dev
    - webpack: 本地運(yùn)行； =》dist目錄可以看到
    - webpack-dev-server: 服務(wù)器運(yùn)行； =》 dist文件夾下無文件；
    - webpack-cli
- react:
  - npm i --save
    - react
    - react-dom
- html模板插件
  - npm i --save-dev html-webpack-plugin;

配置文件：三大類

.babelrc

代碼：

 {
   "presets":["es2015","react","stage-0"],
   "plugins":[]
 }

webpack.config.js

注意：在開發(fā)階段，先不要壓縮；上線再壓縮；
若生成的bundle.js為壓縮文件，在build或start中設(shè)置--mode production

 const webpack=require("webpack");
 const HtmlWebpackPlugin=require("html-webpack-plugin");
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const path=require("path");
 
 module.exports={
     //入口文件：index.js
     entry:path.resolve(__dirname,"./src/index.js"),//"./"可以省略
     //輸出的位置
     output:{
         path:path.resolve(__dirname,"dist"),
         filename:"bundle.js"
     },
     //配置
     module:{
         rules:[
             {//配置JS
                 test:/\.js(x)?$/,
                 use:"babel-loader",
                 exclude:/node_modules/
             },
             {//配置css
                 test: /\.css$/,
                 use: ExtractTextPlugin.extract({
                     fallback: "style-loader",
                     use: "css-loader"
                 })
             }
         ]
     },
     devServer: {
         disableHostCheck: true, //  新增該配置項(xiàng)，防止瀏覽器控制臺(tái)報(bào)錯(cuò)；
     },
     //插件
     plugins:[
         new ExtractTextPlugin("styles.css"),//styles.css是合并后的樣式名；
         new HtmlWebpackPlugin({template:"./src/index.html"})
     ],
     //模型
     mode:"development"http://還可以設(shè)置none，但是不能設(shè)置production，否則會(huì)提示警告；
 };

package.json：配置scripts文件

 "script":{
     "start":"webpack-dev-server --progress(進(jìn)度條） --colors(顏色變化） --content-base dist(依賴的最基本的目錄)",
     "build":"webpack --progress --colors"
  }

寫一些react的測(cè)試文件
- 自己封裝的組件，都放在component文件夾下；
- 把封裝好的組件，導(dǎo)入到index.js文件中；
- index.js是入口文件，會(huì)被編譯打包壓縮到bundle.js；
- bundle.js會(huì)被自動(dòng)插入到index.html文件；
- index.html會(huì)在服務(wù)器下，自動(dòng)被渲染；

react的基本語法

導(dǎo)入文件：import ... from ".."

 import React from "react";
 import ReactDom from "react-dom";

react的寫法，用es6的繼承

 //es6語法引入模塊
 import React from "react";
 //引入自己的css樣式
 import "./footer.css"
 class Footer extends React.Component{
     render(){
         return (
             <div id="footer">
                 {/*我是注釋*/}
                 <h1>我是底部標(biāo)簽</h1>
             </div>
         )
     }
 }
 export default Footer;

導(dǎo)出：export default Footer;

react的基礎(chǔ)知識(shí)

JSX：JS+XML
- return里面的jsx可以定義變量，用{}，如{str}，其中str為變量；
- jsx需要注意的問題：
  - class => className
  - <label for="xx"> => <label htmlfor="xx">
頂級(jí)標(biāo)簽，只能有一個(gè)；

注釋：

JS中的注釋："http://"
return里面jsx的注釋，用{/*xx*/},如{/*注釋內(nèi)容*/}

 class Footer extends React.Component{
     render(){
         return (
             <div>
                 {/*我是注釋*/}
                 <h1>我是底部標(biāo)簽</h1>
             </div>
         )
     }
 }

正常加載css文件：
- 如果是“小型項(xiàng)目”,可在src目錄下，創(chuàng)建一個(gè)css文件夾，文件夾下創(chuàng)建一個(gè)index.css文件，作為全局樣式，引入到index.js中；
  - 引入：在index.js中，通過import來引入，地址為相對(duì)路徑；如：import "./css/index.css";
  - 也就是說，index.js文件下的所有組件都可以設(shè)置此樣式；
- 如果是“大型項(xiàng)目”，相對(duì)每個(gè)模塊都有自己的樣式
  - 給每個(gè)模塊，單獨(dú)創(chuàng)建一個(gè)文件夾，比如：Header文件
    - header.css
    - Header.js:文件中引入自己的css文件；通過import引入；
    - 注意：樣式里面最好寫成唯一的路徑；如：#header h1{ background-color: red; }
頁面在引入不同的css樣式后，會(huì)存放在header標(biāo)簽中，會(huì)有多個(gè)style標(biāo)簽，為了對(duì)所有的樣式進(jìn)行合并，需要使用插件：extract-text-webpack-plugin;
- 安裝命令：npm install --save-dev extract-text-webpack-plugin
- 注意：若webpack版本在4.x以上，那么需要命令：npm install --save-dev extract-text-webpack-plugin@next;這樣會(huì)下載到extract-text-webpack-plugin@4.0.0-beta.0;
- 如果本地運(yùn)行，會(huì)在dist文件夾下生成一個(gè)編譯后的css文件，這個(gè)css文件，將多個(gè)css文件整合到一起；在編譯后的index.html中會(huì)通過link插入此css文件；
如果設(shè)置了class類名，引用的時(shí)候需要寫成className；

數(shù)據(jù)的流動(dòng)

組件自身狀態(tài)的改變，導(dǎo)致數(shù)據(jù)的改變 state

設(shè)置狀態(tài)：寫state在constructor;

 constructor(){
     super();
     //設(shè)置初始狀態(tài)；
     this.state={
         login:false
     }
 }

更改狀態(tài)：可以通過定時(shí)器，也可以通過事件，只要保證this為實(shí)例

 setTimeout(()=>{
     //利用定時(shí)器，重新設(shè)置state；注意this指向；this為實(shí)例
     this.setState({
         login:true
     })
 },3000);

父組件的數(shù)據(jù)傳給子組件

父組件設(shè)置自定義屬性，來設(shè)置傳給子組件的數(shù)據(jù)；

 return(
     <div>
         {/*父組件給子組件傳遞數(shù)據(jù)，設(shè)置屬性*/}
         <Header content={data[1].title}/>
         <Footer/>
     </div>
 )

子組件通過propos來獲取父組件傳遞的數(shù)據(jù)

 return (
     <div id="header">
         {/*我是注釋*/}
         <h1>{str}</h1>
         {/*子組件通過props拿到父組件傳遞的數(shù)據(jù)*/}
         <p>{this.props.content}</p>
     </div>
 )

webpack運(yùn)行過程中踩過的坑

babel-loader版本，必須為7.1.5版本；
model設(shè)置中不能設(shè)置production，否則會(huì)出警告；設(shè)置development或none;
css文件插件安裝時(shí)，webpack為4.x版本時(shí)，需要安裝extract-text-webpack-plugin版本為：4.0.0-beta.0；
將編譯后的bundle.js壓縮，在package-json中設(shè)置scripts時(shí)，在start或build的后面加上--mode production;
瀏覽器的控制臺(tái)中總是報(bào)錯(cuò)Invalid Host/Origin header，則需要在webpack.config.js中設(shè)置devServer: { disableHostCheck: true },來禁用掉disableHostCheck這一配置項(xiàng)。

知識(shí)點(diǎn)

path模塊中的resolve
- 定義：用于拼接地址
- 例：
  - path.resolve("/a/b","/c/d.html")=> /c/d.html
  - path.resolve("/a/b","c/d.html")=> /a/b/c/d.html
  - path.resolve("/a/b","./c/d.html")=> /a/b/c/d.html
  - path.resolve("/a/b","../c/d.html")=> /a/c/d.html
  - path.resolve(__dirname,"dist")=> 指的是當(dāng)前文件所在的目錄下的dist文件夾；
npm命令
- 安裝特定版本插件：npm install --save-dev babel-loader@7.1.5
- 卸載插件：npm uninstall babel-loader

代碼

.babelrc代碼：

 {
   "presets":["es2015","react","stage-0"],
   "plugins":[]
 }

.gitignore代碼：

 /node_modules/

webpack.config.js代碼：

 const webpack=require("webpack");
 const HtmlWebpackPlugin=require("html-webpack-plugin");
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const path=require("path");
 
 module.exports={
     //入口文件：index.js
     entry:path.resolve(__dirname,"./src/index.js"),//"./"可以省略
     //輸出的位置
     output:{
         path:path.resolve(__dirname,"dist"),
         filename:"bundle.js"
     },
     //配置
     module:{
         rules:[
             {//配置JS
                 test:/\.js(x)?$/,
                 use:"babel-loader",
                 exclude:/node_modules/
             },
             {
                 test: /\.css$/,
                 use: ExtractTextPlugin.extract({
                     fallback: "style-loader",
                     use: "css-loader"
                 })
             }
         ]
     },
     devServer: {
         disableHostCheck: true, //  新增該配置項(xiàng)
     },
     //插件
     plugins:[
         new ExtractTextPlugin("styles.css"),//styles.css是合并后的樣式名；
         new HtmlWebpackPlugin({template:"./src/index.html"})
     ],
     //模型
     mode:"development"http://還可以設(shè)置none，但是不能設(shè)置production，否則會(huì)提示警告；
 };

Header.js代碼

 //es6語法引入模塊
 import React from "react";
 import "./header.css";
 
 class Header extends React.Component{
     constructor(){
         super();
         //設(shè)置初始狀態(tài)；
         this.state={
             login:false
         }
     }
     //render為一個(gè)函數(shù)，類原型上的公有屬性方法；
     render(){
         //登錄之后，顯示歡迎誰，沒登錄，先登錄；
         let str="";
         if(this.state.login){
             str="歡迎你，guobin";
         }else{
             str="沒登錄，先登錄"
         }
         setTimeout(()=>{
             //利用定時(shí)器，重新設(shè)置state；注意this指向；
             this.setState({
                 login:true
             })
         },3000);
         return (
             <div id="header">
                 {/*我是注釋*/}
                 <h1>{str}</h1>
                 {/*子組件通過props拿到父組件傳遞的數(shù)據(jù)*/}
                 <p>{this.props.content}</p>
             </div>
         )
     }
 }
 export default Header;

index.js代碼：

 import React from "react";
 import ReactDom from "react-dom";
 
 import Header from "./component/Header/Header";
 import Footer from "./component/Footer/Footer";
 
 //引入css文件，公共樣式，所有組件都可以設(shè)置
 import "./css/index.css";
 
 //設(shè)置數(shù)據(jù)
 var data=[
     {title:"我是111"},
     {title:"我是222"},
     {title:"我是333"}
 ];
 class Index extends React.Component{
     render(){
         return(
             <div>
                 {/*父組件給子組件傳遞數(shù)據(jù)，設(shè)置屬性*/}
                 <Header content={data[1].title}/>
                 <Footer/>
             </div>
         )
     }
 }
 //最后要把Header直接渲染到頁面上去；
 ReactDom.render(<Index/>,document.getElementById("app"));

index.html代碼：

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>頁面</title>
 <link href="styles.css" rel="stylesheet"></head>
 <body>
 <div id="app"></div>
 <script type="text/javascript" src="bundle.js"></script></body>
 </html>

package.json代碼：

 {
   "name": "day1",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "webpack-dev-server --progress --colors --content-base dist",
     "build": "webpack --progress --colors"
   },
   "keywords": [],
   "author": "guomushan",
   "license": "ISC",
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "css-loader": "^2.0.2",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "html-webpack-plugin": "^3.2.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.28.2",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.13"
   },
   "dependencies": {
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   }
 }

文件目錄截圖

項(xiàng)目文件目錄

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

react學(xué)習(xí)第一天筆記

react學(xué)習(xí)第一天筆記

webpack運(yùn)行項(xiàng)目知識(shí)

項(xiàng)目初始化

配置文件分析

項(xiàng)目結(jié)構(gòu)

解決問題

項(xiàng)目開發(fā)總結(jié)

react的基礎(chǔ)知識(shí)

webpack運(yùn)行過程中踩過的坑

知識(shí)點(diǎn)

代碼

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

react學(xué)習(xí)第一天筆記

webpack運(yùn)行項(xiàng)目知識(shí)

項(xiàng)目初始化

配置文件分析

項(xiàng)目結(jié)構(gòu)

解決問題

項(xiàng)目開發(fā)總結(jié)

react的基礎(chǔ)知識(shí)

webpack運(yùn)行過程中踩過的坑

知識(shí)點(diǎn)

代碼

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av