詳解一個基于react+webpack的多頁面應(yīng)用配置

更新時間：2019年01月21日 15:34:57 作者：名揚

這篇文章主要介紹了詳解一個基于react+webpack的多頁面應(yīng)用配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

簡單介紹

首先本文不會對webpack代碼進行解釋，其所有配置都可以在文檔上找到。

平時工作中會寫一些多頁面應(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進行了簡單的說明，如果感興趣了，可以深入研究

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

React報錯Type '() => JSX.Element[]&apos
這篇文章主要為大家介紹了React報錯Type '() => JSX.Element[]' is not assignable to type FunctionComponent解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
Redux使用方法和基本原理解讀
這篇文章主要介紹了Redux使用方法和基本原理,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
在react中使用vue的狀態(tài)管理的方法示例
這篇文章主要介紹了在react中使用vue的狀態(tài)管理的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
React實現(xiàn)響應(yīng)式布局的最佳實踐
在當今的前端開發(fā)中,響應(yīng)式設(shè)計已經(jīng)成為必不可少的部分,隨著各種設(shè)備的出現(xiàn),確保我們的網(wǎng)頁在不同屏幕尺寸上展示良好,已經(jīng)成為開發(fā)者的首要任務(wù)之一,本文將介紹如何在React中實現(xiàn)響應(yīng)式布局,提供一些最佳實踐和示例代碼,幫助大家更好地理解這一概念
2025-02-02
React Native AsyncStorage本地存儲工具類
這篇文章主要為大家分享了React Native AsyncStorage本地存儲工具類，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
詳解React的組件通訊
這篇文章主要介紹了詳解react組件通訊方式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-11-11
React?Native?Modal?的封裝與使用實例詳解
這篇文章主要介紹了React?Native?Modal?的封裝與使用,本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-09-09
ReactQuery系列之數(shù)據(jù)轉(zhuǎn)換示例詳解
這篇文章主要為大家介紹了ReactQuery系列之數(shù)據(jù)轉(zhuǎn)換示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
create-react-app安裝出錯問題解決方法
這篇文章主要介紹了create-react-app安裝出錯問題解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
react-redux中connect的裝飾器用法@connect詳解
這篇文章主要介紹了react-redux中connect的裝飾器用法@connect詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01