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