詳解一個(gè)基于react+webpack的多頁面應(yīng)用配置
簡單介紹
首先本文不會(huì)對webpack代碼進(jìn)行解釋,其所有配置都可以在文檔上找到。
平時(shí)工作中會(huì)寫一些多頁面應(yīng)用,因?yàn)榱?xí)慣了react的開發(fā)模式,故此寫了一個(gè)簡單的配置,跟大家一起分享。如果你也喜歡,對你的開發(fā)有所幫助,希望給點(diǎn)鼓勵(lì)(start)
github地址:https://github.com/ivan-GM/Gm-cli
項(xiàng)目目錄介紹:
打包后文件目錄:
打包成cli如果你厭煩了新項(xiàng)目的復(fù)制、粘貼,也可以構(gòu)建成cli
1,首先創(chuàng)建個(gè)文件夾,npm init初始化項(xiàng)目;
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-10react函數(shù)組件useState異步,數(shù)據(jù)不能及時(shí)獲取到的問題
這篇文章主要介紹了react函數(shù)組件useState異步,數(shù)據(jù)不能及時(shí)獲取到的問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08一文詳解手動(dòng)實(shí)現(xiàn)Recoil狀態(tài)管理基本原理
這篇文章主要為大家介紹了一文詳解手動(dòng)實(shí)現(xiàn)Recoil狀態(tài)管理基本原理實(shí)例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05React Native模塊之Permissions權(quán)限申請的實(shí)例相機(jī)
這篇文章主要介紹了React Native模塊之Permissions權(quán)限申請的實(shí)例相機(jī)的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09使用react render props實(shí)現(xiàn)倒計(jì)時(shí)的示例代碼
這篇文章主要介紹了使用react render props實(shí)現(xiàn)倒計(jì)時(shí)的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12React 的調(diào)和算法Diffing 算法策略詳解
React的調(diào)和算法,主要發(fā)生在render階段,調(diào)和算法并不是一個(gè)特定的算法函數(shù),而是指在調(diào)和過程中,為提高構(gòu)建workInProcess樹的性能,以及Dom樹更新的性能,而采用的一種策略,又稱diffing算法2021-12-12react以create-react-app為基礎(chǔ)創(chuàng)建項(xiàng)目
這篇文章主要介紹了react以create-react-app為基礎(chǔ)創(chuàng)建項(xiàng)目,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03react-router-dom?v6?使用詳細(xì)示例
這篇文章主要介紹了react-router-dom?v6使用詳細(xì)示例,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,感興趣的小伙伴可以參考一下,希望對你的學(xué)習(xí)有所幫助2022-09-09