基於React的腳手架搭建

目的

爲了可以在工做中更加快速的搭建起開發環境，因此在create-react-app的基礎之上結合自身公司業務和我的習慣，搭建了個更加方便的腳手架。GitHub地址

技術棧

react  // mvm框架
typescipt // 開發語言
sass // 預編譯語言
anti-mobile // UI框架
axios // http請求
react-router-dom // 路由
複製代碼

目錄結構

core // 存放一些工具代碼和一些服務
environments  // 存放環境配置文件
pages // app頁面存放文件
routing // 路由
components // 公共組件
複製代碼

搭建過程

1 配置typescript使用環境

首先我打算使用typescript做爲開發語言，首先咱們是用create-react-app來做爲基礎的腳手架工具，按照github上面的操做方法，進行以下操做:

npm install -g create-react-app
create-react-app my-app --scripts-version=react-scripts-ts
cd my-app/
npm start
複製代碼

這樣當咱們就能夠經過npm start啓動應用了

配置scss 參考連接

npm install --save node-sass-chokidar

"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/--watch --recursive",
   "start": "react-scripts-ts start",
   "build": "react-scripts-ts build",
   "test": "react-scripts-ts test --env=jsdom",
複製代碼

按照如上操做便可,而後再添加src/**/*.css在.gitignore文件中。接下來咱們但願項目可以監測scss的變化，從而自動去編譯scss文件，顯然咱們要用到watch-css和build-css這兩個任務，咱們可使用&&操做符，可是這種跨平臺性並非很好，因此咱們採用npm-run-all這個工具。

npm install --save npm-run-all
複製代碼

而後進行以下修改

"scripts": {
     "build-css": "node-sass-chokidar src/ -o src/",
     "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
- "start": "react-scripts-ts start",
- "build": "react-scripts-ts build",
+ "start-js": "react-scripts-ts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build-js": "react-scripts-ts build",
+ "build": "npm-run-all build-css build-js",
     "test": "react-scripts-ts test --env=jsdom",
     "eject": "react-scripts-ts eject"
   }
複製代碼

ok,以上咱們就搭建好了scss環境

安裝anti-mobile

npm install antd-mobile --save
複製代碼

npm install react-app-rewired --save-dev
複製代碼

"scripts": {
	"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
	"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
+ "start-js": "react-app-rewired start --scripts-version react-scripts-ts",
    "start": "npm-run-all -p watch-css start-js",
+ "build-js": "react-app-rewired build --scripts-version react-scripts-ts",
    "build": "npm-run-all build-css build-js",
+ "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
複製代碼

這裏因爲咱們使用的是typescript，因此"start-js": "react-app-rewired start --scripts-version react-scripts-ts",和"build-js": "react-app-rewired build --scripts-version react-scripts-ts",後面要加上react-scripts-ts。接下來咱們實現按需加載參考連接

安裝npm install babel-plugin-import --save-dev

更改config-overrides.js文件

/* config-overrides.js */
const tsImportPluginFactory = require('ts-import-plugin')
const { getLoader } = require("react-app-rewired");

module.exports = function override(config, env) {
    const tsLoader = getLoader(
        config.module.rules,
        rule =>
            rule.loader &&
            typeof rule.loader === 'string' &&
            rule.loader.includes('ts-loader')
    );

    tsLoader.options = {
        getCustomTransformers: () => ({
            before: [ tsImportPluginFactory({
                libraryName: 'antd-mobile',
                libraryDirectory: 'es',
                style: 'css',
            }) ]
        })
    };

    return config;
};
複製代碼

這樣咱們就能夠直接引入import { Button } from 'antd-mobile';不須要在前面引入import 'antd-mobile/dist/antd-mobile.css';

當咱們引入antd-mobile後可能會出現下列錯誤

E:/MyProjects/frame-work-cli/my-app/node_modules/antd-mobile/lib/picker/PropsType.d.ts (7,15): Parameter 'values' implicitly has an 'any' type.

找到node_modules/antd-mobile/lib/picker/PropsType.d.ts把format?: (values) => void;改爲 format?: (values: any) => void;便可固然爲了直接省事，直接在tsconfig.json設置"noImplicitAny": false。

4 開發環境切換配置

如今公司通常都會有開發環境，預發佈環境和正式環境，這些環境所對應的後端地址並不同，因此咱們要來進行一些配置方便切換。實現的思路就是讀取命令行參數，根據參數把不一樣環境的配置文件的內容複製替換掉environment.js這個文件，這裏咱們用到了shelljs和cross-env(讀取命令行參數)這兩個js庫。 建立cp-environment.js

const shell = require('shelljs');

const env = process.env.NODE_ENV;
const src = `src/environments/environment.${env}.ts`;
const to = `src/environments/environment.ts`;

shell.cp('-R', src, to);
複製代碼

更改package.json

"scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "start-js": "react-app-rewired start --scripts-version react-scripts-ts",
    "start": "cross-env NODE_ENV=pro npm-run-all cp-environment -p watch-css start-js",
    "startDev": "cross-env NODE_ENV=dev npm-run-all cp-environment -p watch-css start-js",
    "startLocal": "cross-env NODE_ENV=local npm-run-all cp-environment -p watch-css start-js",
    "build-js": "react-app-rewired build --scripts-version react-scripts-ts",
    "build": "cross-env NODE_ENV=pro npm-run-all cp-environment build-css build-js",
    "buildLocal": "cross-env NODE_ENV=Local npm-run-all cp-environment build-css build-js",
    "buildDev": "cross-env NODE_ENV=dev npm-run-all cp-environment build-css build-js",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts-ts eject",
    "cp-environment": "node cp-environment.js"
  }
複製代碼

固然咱們開發環境上傳的代碼應該是buildDev後的代碼，可是有可能有時進行了誤操做，把build後的代碼上傳上去，咱們還能夠寫一個檢測的腳本。 原理就是讀取當前分支名，根據分知名和當前的環境變量進行對比。

const branchEnvMap = {
  dev: 'dev',
  test: 'test',
  release: 'prod',
};

const shell = require('shelljs');
const branch = shell.exec('git rev-parse --symbolic-full-name --abbrev-ref HEAD', { silent: true }).toString().trim();
const env = process.argv.slice(2).toString().split('=')[1].toString();

if (branchEnvMap[branch] !== env) {
  shell.echo('該分支對應的編譯任務不是這個，請檢查執行的命令!', branch, env);
  shell.exit(1);
}
複製代碼

Http

用到就是axios，至於怎麼用直接看個人GitHub地址就行，這裏進行了一層封裝，主要是對返回的結果進行統一的處理。

路由

我用到的是react-router-dom,至於用法仍是推薦看github，

坑

1 E:/MyProjects/frame-work-cli/my-app/node_modules/@types/react-dom/node_modules/@types/react/index.d.ts (3631,13): Subsequent property declarations must have the same type.
Property 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>'.

當咱們啓動應用的時候可能會出現如上錯誤，這是因爲咱們安裝的@types/react和@types/react-dom版本並不怎麼一致，參考連接， 例以下面的版本

"@types/react": "^15.6.7",
 "@types/react-dom": "^16.0.3",
複製代碼

因此咱們能夠換成

"@types/react": "^16.0.36", 
"@types/react-dom: "^16.0.3" 複製代碼

2 E:/MyProjects/frame-work-cli/my-app/node_modules/antd-mobile/lib/picker/PropsType.d.ts(7,15): Parameter 'values' implicitly has an 'any' type.

在tsconfig.json設置"noImplicitAny": false

3 error TS1192: Module '"react"' has no default export.

設置 tsconfig.json "allowSyntheticDefaultImports": true,

4 expected parameter: 'props' to have a typedef

在tslint.json設置typedef: false,這個屬於tslint相關配置的問題，具體能夠看文檔

最後（歡迎你們關注我）

DJL簫氏我的博客

博客GitHub地址

簡書

掘金