最近公司給公司里架設了私有的npm倉庫，相應地也需要一個用來發布react組件用的腳手架，在這個過程中又又又又復習了一下webpack，在這里分享下腳手架搭建的過程。

首先，我們預期的腳手架具有如下功能

1.創建項目

腳手架的名字暫時取react-simple-component-boilerplate。

首先創建一個新目錄用于放我們的文件:

mkdir react-simple-component-boilerplatecd react-simple-component-boilerplate

使用npm命令創建一個項目

npm init

接下來會提示你輸入項目的名稱、版本號、作者等，也可以一路回車，稍后修改。

這一步完成后，你的項目文件夾里應該有一個package.json文件了，這個文件保存了我們項目和組件的各種信息。

接下來創建如下的目錄結構

react-simple-component-boilerplate |-- config // webpack配置 |-- demo // 開發時預覽用 |-- dist // 打包結果 |-- src  // 源文件目錄  | -- assets // 存放圖片等媒體文件  | -- style // 存放樣式，項目使用的是less來編寫樣式

2.安裝依賴

既然我們要發布的是react組件，那依賴里肯定少不了react。

使用npm install安裝下面的依賴

npm install react react-dom --save

打包工具選擇的是webpack，下面是開發依賴，也需要一并安裝

 "devDependencies": { // babel用于將你寫的es6+的代碼轉換到es5 "@babel/cli": "^7.0.0", "@babel/core": "^7.0.0", "@babel/plugin-proposal-class-properties": "^7.0.0", // 用于支持class屬性 "@babel/plugin-proposal-decorators": "^7.0.0", // 支持decorator "@babel/plugin-transform-modules-commonjs": "^7.0.0", "@babel/plugin-transform-runtime": "^7.0.0", // 自動polyfill es5不支持的api特性 "@babel/preset-env": "^7.0.0", // 根據目標環境來按需轉碼 "@babel/preset-react": "^7.0.0", // 讓babel支持react語法 "babel-loader": "^8.0.0", "css-loader": "^1.0.0", "file-loader": "^2.0.0", "html-loader": "^0.4.4", "less-loader": "^4.1.0", // 使用less來編寫樣式 "mini-css-extract-plugin": "^0.5.0", // 將css提取成一個單獨的文件 "style-loader": "^0.23.0", "webpack": "^4.26.0", "webpack-cli": "^3.1.2", // webpack4之后需要額外安裝webpack-cli "webpack-dev-server": "^3.1.14", // 開發時預覽組件所用的服務，在文件變化時會自動刷新頁面 "webpack-merge": "^4.1.4" // 用于合并webpack配置 },

3.編寫組件

在/src目錄下新建一個index.js，這就是我們組件的入口文件了。

如果項目中要使用圖片、css等，分類放到assets、style文件夾下就好。

下面我們就在index.js中寫一個簡單的組件