資訊專欄INFORMATION COLUMN
摘要：對的工作流程有點模糊，以及據(jù)官方文檔稱的升級，性能得到了極大的提升，而還是用的，于是決定從頭開始搭建一個適合團隊的腳手架。保證各文件獲得一致的文件編碼和縮進效果。這些在后面文章中，都會一個個涉及到，此處不做詳細展開。
前言
寫前端項目這么久了，以前用的 dva 框架，后來用過 create-react-app 框架，都需要針對團隊做一些定制化的修改。對 webpack 的工作流程有點模糊，以及據(jù) webpack 官方文檔稱 webpack@4 的升級，性能得到了極大的提升，而 create-react-app 還是用的webapck@3 ，于是決定從頭開始搭建一個適合團隊的腳手架。由于近期 babel 也升級到了babel@7, 就順便把babel 也升級了。
主要依賴及版本react@16
webpack@4
babel@7
eslint@5
prettier@1
stylelint
editorconfig
husky
lint-staged
react 肯定是必須的，作為主要的js框架。
webapck 是本文的重點，核心構(gòu)建工具就是它。
babel 用來把 esnext 語法轉(zhuǎn)成業(yè)務場景瀏覽器支持的語法。
eslint 用來規(guī)范團隊 js 代碼風格，主要處理 js 語法問題。
prettier 用來格式化代碼，以保證團隊代碼風格一致。
stylelint 用來規(guī)范 css、less 代碼。
editorconfig 保證各文件獲得一致的文件編碼和縮進效果。
husky 和 lint-staged 主要做 gitHooks ，在代碼提交前做 eslint、stylelint 校驗。
這些在后面文章中，都會一個個涉及到，此處不做詳細展開。
mkdir my-react-app cd my-react-app npm init安裝必要依賴
# react 相關 npm i -S react react-dom # webpack 相關 npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin # babel 相關，轉(zhuǎn)換 esnext 到 es5 npm i -D @babel/core @babel/preset-env @babel/preset-react入口文件
mkdir src public # 創(chuàng)建 src 和 public目錄 touch src/index.js # 創(chuàng)建 js 入口文件 touch public/index.html # 創(chuàng)建 html 模板文件 touch babel.config.js # babel@7配置文件 touch webpack.config.js # webpack 配置文件
src/index.js 文件內(nèi)容
import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render(awesome react., document.getElementById("root") );
public/index.html 文件內(nèi)容
babel 配置文件my-react-app
// babel.config.js
module.exports = {
presets: [
["@babel/preset-env", { modules: false }],
"@babel/preset-react"
]
}
開始寫 webpack 配置文件
// webpack.config.js
// 用來把 js、css 插入 模板html
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 開發(fā)模式
mode: "development",
// 入口 js
entry: "./src/index.js",
// 產(chǎn)出結(jié)果
output: {
// 產(chǎn)出文件名
filename: "bundle.js",
// 產(chǎn)出目錄
path: __dirname + "/dist"
},
// 對各種文件類型（模塊）進行處理
module: {
rules: [
{
// 對以 `.js` 結(jié)尾的文件使用 `babel-loader` 處理
// `babel-loader` 會自動加載`babel.config.js` 配置文件
test: /.js$/,
use: "babel-loader",
// 排除 `node_modules` 目錄，不對它做處理
exclude: /node_modules/
}
]
},
plugins: [
// 使 產(chǎn)出結(jié)果自動插入 自定義模板 html文件
new HtmlWebpackPlugin({
template: __dirname + "/public/index.html"
})
]
};
結(jié)果
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98634.html
摘要：開箱即用的多頁面腳手架基于模塊化開發(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...
摘要：搭建一個項目環(huán)境首先生成文件至此我們就可以安裝的相關依賴了。下的依賴核心部分，把轉(zhuǎn)化成外部引用輔助函數(shù)和內(nèi)置函數(shù)，自動填充代碼而不會污染全局變量。入口文件我在中配的，所以在下新建文件，添加我們的第一個組件。 搭建一個React項目環(huán)境 首先npm init生成package.json文件.至此我們就可以安裝react的相關依賴了。 npm install react --save np...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
閱讀 1093·2023-04-26 02:02
閱讀 2435·2021-09-26 10:11
閱讀 3582·2019-08-30 13:10
閱讀 3777·2019-08-29 17:12
閱讀 749·2019-08-29 14:20
閱讀 2215·2019-08-28 18:19
閱讀 2261·2019-08-26 13:52
閱讀 983·2019-08-26 13:43
