詳解一個基于react+webpack的多頁面應(yīng)用配置
更新時間：2019年01月21日 15:34:57 作者：名揚
這篇文章主要介紹了詳解一個基于react+webpack的多頁面應(yīng)用配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
簡單介紹
首先本文不會對webpack代碼進(jìn)行解釋，其所有配置都可以在文檔上找到。
平時工作中會寫一些多頁面應(yīng)用，因為習(xí)慣了react的開發(fā)模式，故此寫了一個簡單的配置，跟大家一起分享。如果你也喜歡，對你的開發(fā)有所幫助，希望給點鼓勵（start）
github地址：https://github.com/ivan-GM/Gm-cli
項目目錄介紹：
打包后文件目錄：
打包成cli如果你厭煩了新項目的復(fù)制、粘貼，也可以構(gòu)建成cli
1，首先創(chuàng)建個文件夾，npm init初始化項目；
2, 創(chuàng)建bin目錄，touch index.js 編寫配置文件；
const commander = require('commander');
const inquirer = require('inquirer');
const download = require('download-git-repo')
const ora = require('ora');
const questions = [
{
type: 'input',
name: 'projectName',
message: 'project name:',
filter: function (val) {
return val;
}
}
]
commander
.option('init', 'create project')
.version('1.0', '-v, --version')
commander
.command('init')
.description('')
.action(() => {
inquirer.prompt(questions).then(answers => {
const { projectName } = answers;
const spinner = ora('Loading unicorns').start();
spinner.color = 'green';
spinner.text = 'downloading template...';
download('direct:https://github.com/ivan-GM/live', projectName, { clone: true }, (err) => {
if (err) {
console.log(err)
} else {
spinner.stop()
console.log('sucess')
}
})
})
});
commander.parse(process.argv);
3，添加命令:打開package.json
"bin": {
"my-cli": "./bin/index.js"
},
4,發(fā)布npm
*上面代碼只是對打包成cli進(jìn)行了簡單的說明，如果感興趣了，可以深入研究
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React使用useEffect解決setState副作用詳解
這篇文章主要為大家介紹了React使用useEffect解決setState副作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
react函數(shù)組件useState異步,數(shù)據(jù)不能及時獲取到的問題
這篇文章主要介紹了react函數(shù)組件useState異步,數(shù)據(jù)不能及時獲取到的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
一文詳解手動實現(xiàn)Recoil狀態(tài)管理基本原理
這篇文章主要為大家介紹了一文詳解手動實現(xiàn)Recoil狀態(tài)管理基本原理實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了詳解React 服務(wù)端渲染方案完美的解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
React Native模塊之Permissions權(quán)限申請的實例相機(jī)
這篇文章主要介紹了React Native模塊之Permissions權(quán)限申請的實例相機(jī)的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了React Native 腳手架的基本使用詳解,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
使用react render props實現(xiàn)倒計時的示例代碼
這篇文章主要介紹了使用react render props實現(xiàn)倒計時的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
React 的調(diào)和算法Diffing 算法策略詳解
React的調(diào)和算法，主要發(fā)生在render階段，調(diào)和算法并不是一個特定的算法函數(shù)，而是指在調(diào)和過程中，為提高構(gòu)建workInProcess樹的性能，以及Dom樹更新的性能，而采用的一種策略，又稱diffing算法2021-12-12
react以create-react-app為基礎(chǔ)創(chuàng)建項目
這篇文章主要介紹了react以create-react-app為基礎(chǔ)創(chuàng)建項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
react-router-dom?v6?使用詳細(xì)示例
這篇文章主要介紹了react-router-dom?v6使用詳細(xì)示例，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2022-09-09