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