資訊專欄INFORMATION COLUMN
摘要：搭建一個(gè)項(xiàng)目環(huán)境首先生成文件至此我們就可以安裝的相關(guān)依賴了。下的依賴核心部分，把轉(zhuǎn)化成外部引用輔助函數(shù)和內(nèi)置函數(shù)，自動(dòng)填充代碼而不會(huì)污染全局變量。入口文件我在中配的，所以在下新建文件，添加我們的第一個(gè)組件。
搭建一個(gè)React項(xiàng)目環(huán)境
首先npm init生成package.json文件.
至此我們就可以安裝react的相關(guān)依賴了。
npm install react --save npm install react-dom --save
安裝完react相關(guān)，下一步安裝webpack
npm install webpack --save-dev npm install webpack-dev-server --save-dev //實(shí)現(xiàn)熱加載
webpack安裝完babel是重頭戲！babel更新了7版本后，舍棄了以前的 babel-- 的命名方式，改成了@babel/--的命名方式，通過(guò)試錯(cuò)后，將常用依賴，以及.babelrc文件配置在此列出以供參考。
//devDependencies下的依賴 npm install @babel/core --save-dev //babel核心部分，把ES6轉(zhuǎn)化成ES5 npm install @babel/plugin-transform-runtime --save-dev //外部引用輔助函數(shù)和內(nèi)置函數(shù)，自動(dòng)填充代碼而不會(huì)污染全局變量。 npm install @babel/preset-env --save-dev //提供環(huán)境的映射獲得插件列表并傳遞給babel npm install @babel/preset-react --save-dev //解析JSX npm install babel-loader --save-dev //webpack需要用到這個(gè)loader //dependencies下的依賴 npm install @babel/polyfill --save //轉(zhuǎn)義es6的API npm install @babel/runtime --save //babel變換運(yùn)行時(shí)插件的依賴
上述是babel的環(huán)境安裝，下面來(lái)看下.babelrc的文件配置，在根目錄下創(chuàng)建.babelrc文件
//.babelrc文件內(nèi)容
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-transform-runtime"]
}
下面在根目錄新建一個(gè)webpack.config.js文件，加入以下內(nèi)容
var webpack = require("webpack");
module.exports = {
entry: "./src/app.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"},module: {
rules: [
{ test: /.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
}
基本上配置內(nèi)容都OK了！下面添加頁(yè)面內(nèi)容
添加頁(yè)面內(nèi)容基本配置都有了，現(xiàn)在要往里面增加內(nèi)容了，首先第一步在根目錄下創(chuàng)建index.html文件，之后在根目錄創(chuàng)建src文件夾用來(lái)放我們新增的組件。
入口文件我在webpack中配的./src/app.js，所以在src下新建app.js文件，添加我們的第一個(gè)組件。
//根目錄下index.html文件內(nèi)容
Document
//src下的app.js文件內(nèi)容
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
render(){
return hello world
}
}
ReactDOM.render(
現(xiàn)在內(nèi)容有了，我們把package.json中的script部分改成這樣：
"scripts": {
"start": "webpack-dev-server --hot --inline --mode development --colors --content-base",
"build": "webpack --progress --colors --mode production"
}
大功告成啦！現(xiàn)在使用npm start啟動(dòng)你的項(xiàng)目吧！效果如圖
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/101900.html
摘要：對(duì)的工作流程有點(diǎn)模糊，以及據(jù)官方文檔稱的升級(jí)，性能得到了極大的提升，而還是用的，于是決定從頭開(kāi)始搭建一個(gè)適合團(tuán)隊(duì)的腳手架。保證各文件獲得一致的文件編碼和縮進(jìn)效果。這些在后面文章中，都會(huì)一個(gè)個(gè)涉及到，此處不做詳細(xì)展開(kāi)。 前言 寫前端項(xiàng)目這么久了，以前用的 dva 框架，后來(lái)用過(guò) create-react-app 框架，都需要針對(duì)團(tuán)隊(duì)做一些定制化的修改。對(duì) webpack 的工作流程有點(diǎn)模...
摘要：開(kāi)箱即用的多頁(yè)面腳手架基于模塊化開(kāi)發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站感興趣的朋友，請(qǐng)點(diǎn)個(gè)及時(shí)關(guān)注項(xiàng)目更新請(qǐng)點(diǎn)個(gè)項(xiàng)目請(qǐng)?zhí)崽匦灾С智昂蠖朔蛛x開(kāi)發(fā)配置完整的打包方案支持本地開(kāi)發(fā)熱更新集成代碼風(fēng)格校驗(yàn)支持編寫源碼，編譯生成生產(chǎn)代碼內(nèi)置開(kāi)發(fā)環(huán)境，自動(dòng)加樣式前綴自 Webpack-seed 開(kāi)箱即用的多頁(yè)面腳手架, 基于webpack4.2x babel7.1x模塊化開(kāi)發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站(Without Vu...
摘要：與簡(jiǎn)單來(lái)說(shuō)包括了和轉(zhuǎn)義和的包。雖然實(shí)際壓縮已經(jīng)能夠優(yōu)化掉大部分體積的，但是對(duì)于一些最新瀏覽器版本來(lái)說(shuō)，任何的都是浪費(fèi)資源的。以服務(wù)端渲染的方式從請(qǐng)求中獲取到的信息，然后返回對(duì)應(yīng)的。 使用@babel/polyfill可以讓你在任何es2015+的環(huán)境中編寫代碼，而不需要擔(dān)心兼容性問(wèn)題。它會(huì)在全局變量上添加一些類似于原生的方法。但是webpack一直以來(lái)配置都特別復(fù)雜，直到webpack...
摘要：項(xiàng)目配置不多說(shuō)，先上配置總結(jié)的包都是以開(kāi)頭的，所有的模塊插件啥的都是在目錄下中真正干活的是插件，插件的作用是預(yù)置，就是一個(gè)插件包的集合，你也可以自己寫插件包插件包不夠用，再配置唄配置了肯定要用新版本的老版本的會(huì)找而不是會(huì) babel7 React項(xiàng)目配置 不多說(shuō)，先上babelrc配置 { presets: [ [ @babel/env, { ...
閱讀 4042·2021-11-24 09:38
閱讀 1342·2021-10-19 11:42
閱讀 1899·2021-10-14 09:42
閱讀 2213·2019-08-30 15:44
閱讀 605·2019-08-30 14:04
閱讀 2958·2019-08-30 13:13
閱讀 2022·2019-08-30 12:51
閱讀 1030·2019-08-30 11:22
