快速學習ReactJS-搭建環境

• 2020 年 2 月 14 日
• 筆記

2.3、搭建環境

2.3.1、創建項目

我們依然選擇使用UmiJS作為構建工具。 創建工程：

輸入命令，進行初始化：

tyarn init -y

初始化完成：

在命令輸入如下命令：

tyarn add umi --dev	#項目中添加umi的依賴

可以看到，相關的依賴已經導入進來了

2.3.2、編寫HelloWorld程式

第一步，在工程的根目錄下創建config目錄，在config目錄下創建config.js文件。

在UmiJS的約定中，config/config.js將作為UmiJS的全局配置文件。

在umi中，約定的目錄結構如下：

在config.js文件中輸入以下記憶體，以便後面使用：

//導出一個對象，暫時設置為空對象，後面再填充內容  export default {};

第二步，創建HelloWorld.js頁面文件

在umi中，約定存放頁面程式碼的文件夾是在src/pages，可以通過singular:false來設置單數的命名方式，我們採用默 認即可。

在HelloWorld.js文件中輸入如下內容：

在這裡，可以會比較奇怪，怎麼可以在js文件中寫html程式碼，其實，這是react自創的寫法，叫JSX，後面我們再細一一說。

第三步，啟動服務查看頁面效果

#啟動服務  umi dev

可以看到，通過/HelloWorld路徑即可訪問到剛剛寫的HelloWorld.js文件。

在 umi 中，可以使用約定式的路由，在 pages 下面的 JS 文件都會按照文件名映射到一個路由，比如上面這個例子， 訪問 /helloworld 會對應到 HelloWorld.js。

當然了，也可以自定義路由，具體的路由配置在後面講解。

2.3.3、添加umi-plugin-react插件

umi-plugin-react插件是umi官方基於react封裝的插件，包含了13個常用的進階功能。 具體可查看：https://umijs.org/zh/plugin/umi-plugin-react.html

#添加插件  tyarn add umi-plugin-react --dev

添加成功：

接下來，在config.js文件中引入該插件：

2.3.4、構建和部署

現在我們寫的js，必須通過umi先轉碼後才能正常的執行，那麼我們最終要發布的項目是普通的html、js、css，那麼應該怎麼操作呢？

其實，通過umi是可以進行轉碼生成文件的，具體操作如下：

umi build

可以看到，已經生成了index.html和umi.js文件。我們打開umi.js文件看看。

首先，看到的是umi.js文件是一個已經壓縮過的文件，然後搜索「hello world」，可以找到，我們剛剛寫的程式碼已經被轉碼了。

至此，開發環境搭建完畢。