成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

如何搭建一個(gè)基于react、webpack4、babel7的項(xiàng)目（一）

IamDLY / 685人閱讀

摘要：對(duì)的工作流程有點(diǎn)模糊，以及據(jù)官方文檔稱的升級(jí)，性能得到了極大的提升，而還是用的，于是決定從頭開(kāi)始搭建一個(gè)適合團(tuán)隊(duì)的腳手架。保證各文件獲得一致的文件編碼和縮進(jìn)效果。這些在后面文章中，都會(huì)一個(gè)個(gè)涉及到，此處不做詳細(xì)展開(kāi)。

前言

寫(xiě)前端項(xiàng)目這么久了，以前用的 dva 框架，后來(lái)用過(guò) create-react-app 框架，都需要針對(duì)團(tuán)隊(duì)做一些定制化的修改。對(duì) webpack 的工作流程有點(diǎn)模糊，以及據(jù) webpack 官方文檔稱 webpack@4 的升級(jí)，性能得到了極大的提升，而 create-react-app 還是用的webapck@3 ，于是決定從頭開(kāi)始搭建一個(gè)適合團(tuán)隊(duì)的腳手架。由于近期 babel 也升級(jí)到了babel@7, 就順便把babel 也升級(jí)了。

主要依賴及版本

react@16

webpack@4

babel@7

eslint@5

prettier@1

stylelint

editorconfig

husky

lint-staged

react 肯定是必須的，作為主要的js框架。
webapck 是本文的重點(diǎn)，核心構(gòu)建工具就是它。
babel 用來(lái)把 esnext 語(yǔ)法轉(zhuǎn)成業(yè)務(wù)場(chǎng)景瀏覽器支持的語(yǔ)法。
eslint 用來(lái)規(guī)范團(tuán)隊(duì) js 代碼風(fēng)格，主要處理 js 語(yǔ)法問(wèn)題。
prettier 用來(lái)格式化代碼，以保證團(tuán)隊(duì)代碼風(fēng)格一致。
stylelint 用來(lái)規(guī)范 css、less 代碼。
editorconfig 保證各文件獲得一致的文件編碼和縮進(jìn)效果。
husky 和 lint-staged 主要做 gitHooks ，在代碼提交前做 eslint、stylelint 校驗(yàn)。
這些在后面文章中，都會(huì)一個(gè)個(gè)涉及到，此處不做詳細(xì)展開(kāi)。

話不多說(shuō)，先初始化一個(gè)項(xiàng)目 
mkdir my-react-app
cd my-react-app
npm init

安裝必要依賴 
# react 相關(guān)
npm i -S react react-dom
# webpack 相關(guān)
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
# babel 相關(guān)，轉(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)容




  
  
  
  my-react-app
babel 配置文件 
// babel.config.js
module.exports = {
  presets: [
    ["@babel/preset-env", { modules: false }],
    "@babel/preset-react"
  ]
}
開(kāi)始寫(xiě) webpack 配置文件 
// webpack.config.js
// 用來(lái)把 js、css 插入 模板html
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 開(kāi)發(fā)模式
  mode: "development",

  // 入口 js
  entry: "./src/index.js",

  // 產(chǎn)出結(jié)果
  output: {
    // 產(chǎn)出文件名
    filename: "bundle.js",

    // 產(chǎn)出目錄
    path: __dirname + "/dist"
  },

  // 對(duì)各種文件類(lèi)型（模塊）進(jìn)行處理
  module: {
    rules: [
      {
        // 對(duì)以 `.js` 結(jié)尾的文件使用 `babel-loader` 處理
        // `babel-loader` 會(huì)自動(dòng)加載`babel.config.js` 配置文件
        test: /.js$/,
        use: "babel-loader",

        // 排除 `node_modules` 目錄，不對(duì)它做處理
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    // 使 產(chǎn)出結(jié)果自動(dòng)插入 自定義模板 html文件
    new HtmlWebpackPlugin({
      template: __dirname + "/public/index.html"
    })
  ]
};
結(jié)果

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/98634.html

相關(guān)文章

  • 基于webpack4.x, babel7.x 搭建的多頁(yè)面腳手架, 簡(jiǎn)化前端開(kāi)發(fā)環(huán)境配置，開(kāi)箱即用，

    摘要：開(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)支持編寫(xiě)源碼，編譯生成生產(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...

    junfeng777 評(píng)論0 收藏0

  • 手動(dòng)創(chuàng)建基于webpack+babel的react應(yīng)用(babel7)

    摘要：搭建一個(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 np...

    alaege 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    khs1994 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<