详解一个基于react+webpack的多页面应用配置

简单介绍

首先本文不会对webpack代码进行解释，其所有配置都可以在文档上找到。

平时工作中会写一些多页面应用，因为习惯了react的开发模式，故此写了一个简单的配置，跟大家一起分享。如果你也喜欢，对你的开发有所帮助，希望给点鼓励（start）

github地址：https://github.com/ivan-GM/Gm-cli

项目目录介绍：

打包后文件目录：

打包成cli如果你厌烦了新项目的复制、粘贴，也可以构建成cli

1，首先创建个文件夹，npm init初始化项目；

2, 创建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,发布npm

*上面代码只是对打包成cli进行了简单的说明，如果感兴趣了，可以深入研究

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • webpack4 + react 搭建多页面应用示例

    webpack 升级到4之后还没好好的同步一个可实用的webpack架子,接下来用webpack4来搭建一个简单的react的多界面应用,废话不说 直接撸码 创建工程 $ mkdir demo && cd demo $ npm init -y webpack 配置 安装react + babel 依赖 $ npm i -S react@16.3.0 react-dom@16.3.0 $ npm i -D webpack@4.4.1 webpack-cli@2.0.13 webpack-de

  • webpack4+react多页面架构的实现

    webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常是将业务js,css打包到同一个html文件中,整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口,比如不同的h5活动,或者需要支持seo的官方网站,都需要多个不同的html,webpack-react-multi-page架构让你可以实现多页面架构,在项目开发中保证每个页面都可以热更新并且打包后有清晰的文件层次结构. Github地址 项目架构 技术使用 react16

  • webpack构建react多页面应用详解

    webpack构建react多页面应用详解

    写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应用 npm install -g create-react-app 然后创建一个项目 create-react-app demo create-react-app会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请用cnpm淘宝镜像安装. 然后我们进入项目并启动

  • 浅谈webpack+react多页面开发终极架构

    webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常指的是将业务js,css打包到同一个html文件中,整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口,比如不同的h5活动,或者需要支持seo的官方网站,都需要多个不同的html.webpack-react-multi-page架构让你可以在多页面在项目开发中自动化打包新创建页面并保证每个页面都可以热更新 ,build打包后有清晰的文件层次结构. 概览 key value

  • 详解一个基于react+webpack的多页面应用配置

    简单介绍 首先本文不会对webpack代码进行解释,其所有配置都可以在文档上找到. 平时工作中会写一些多页面应用,因为习惯了react的开发模式,故此写了一个简单的配置,跟大家一起分享.如果你也喜欢,对你的开发有所帮助,希望给点鼓励(start) github地址:https://github.com/ivan-GM/Gm-cli 项目目录介绍: 打包后文件目录: 打包成cli如果你厌烦了新项目的复制.粘贴,也可以构建成cli 1,首先创建个文件夹,npm init初始化项目: 2, 创建bin

  • 详解一个基于套接字实现长连接的express

    逻辑: 首先把routerUrl目录下的函数初始化缓存起来,通过Router.request调用缓存起来的函数,这个函数实际上是register.set方法,主要是开始运行函数链,通过register.next 运行下一个函数. 函数流 main.js --> Router.request --> register.set --> register.next --> sock.write main.js 'use strict'; const routerUrl = 'router

  • 详解JavaScript基于面向对象之创建对象（2）

    接着上文<详解JavaScript基于面向对象之创建对象(1)>继续学习. 4.原型方式        我们创建的每个函数都有一个通过prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法.逻辑上可以这么理解:prototypt通过条用构造函数而创建的那个对象的原型对象.使用原型的好处就是可以让所有对象实例共享它所包含的属性和方法.也就是说,不必在构造函数中定义对象信息,而是直接将这些信息添加到原型中.        原型方式利用了对象的pr

  • 详解JavaScript基于面向对象之继承

    详解JavaScript基于面向对象之继承

    一.面相对象继承机制       这个实例使用UML很好的解释了继承机制.       说明继承机制最简单的方式是,利用一个经典的例子就是几何形状.实际上,几何形状只有两种,即椭圆形(是圆形的)和多边形(具有一定数量的边).圆是椭圆的一种,它只有一个焦点.三角形.矩形和五边形都是多边形的一种,具有不同数量的边.正方形是矩形的一种,所有的边等长.这就构成了一种完美的继承关系,很好的解释了面向对象的继承机制.        在这个例子中,形状是椭圆形和多边形的基类(通常我们也可以叫它父类,所有类都由

  • 详解go基于viper实现配置文件热更新及其源码分析

    go第三方库 github.com/spf13/viper实现了对配置文件的读取并注入到结构中,好用方便. 其中以 viperInstance := viper.New() // viper实例 viperInstance.WatchConfig() viperInstance.OnConfigChange(func(e fsnotify.Event) { log.Print("Config file updated.") viperLoadConf(viperInstance) //

  • 详解SpringBoot基于Dubbo和Seata的分布式事务解决方案

    1. 分布式事务初探 一般来说,目前市面上的数据库都支持本地事务,也就是在你的应用程序中,在一个数据库连接下的操作,可以很容易的实现事务的操作. 但是目前,基于SOA的思想,大部分项目都采用微服务架构后,就会出现了跨服务间的事务需求,这就称为分布式事务. 本文假设你已经了解了事务的运行机制,如果你不了解事务,那么我建议先去看下事务相关的文章,再来阅读本文. 1.1 什么是分布式事务 对于传统的单体应用而言,实现本地事务可以依赖Spring的@Transactional注解标识方法,实现事务非常简

  • 详解搭建基于C#和Appium的Android自动测试环境

    详解搭建基于C#和Appium的Android自动测试环境

    关于Appium环境搭建的例子网上比较多,不过都是关于Python,Java的,使用C#客户端的资料比较少,公司现有的测试系统是基于C#构建的,因为要和现有系统集成,所以选择的C#语言作为客户端, 下载Appium 官网提供的C#例子,但是对应的Android 版本,Nunit 版本都比较旧,对于初次接触手机测试的人来说,一步一个坑,把例子拿下来,折腾了一两天,还是各种问题.最终通过百度,Google,终于搭建好了环境,现在分享一下过程,希望对于后来人会有些帮助. 默认大家是安装了Visual

  • 详解JavaScript基于面向对象之继承实例

    javascript面向对象继承的简单实例: 作为一门面向对象的语言,继承自然是它的一大特性,尽管javascript的面向对象的实现机制和和c#和java这样典型的面向对象不同,但是继承的基本特点还是具有的,简单的说就是获得父级的方法和属性,下面是一段简单的实例,大家有兴趣可以分析一下: window.onload = function(){ function parent(age,name){ this.age = age; this.name = name; } parent.protot

  • 详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程

    第一步: 打包开始之前删除'./dist'目录 rimraf('./dist', () => { constprodConfig = require('../../lib/webpack.prod') webpack(prodConfig, (err, stats) \=> { if (err) { console.log(err) process.exit(2) } console.log(stats.toString({ color:true, modules:false, childre

  • Java 添加、删除、替换、格式化Word中的文本的步骤详解（基于Spire.Cloud.SDK for Java）

    Spire.Cloud.SDK for Java提供了TextRangesApi接口可通过addTextRange()添加文本.deleteTextRange()删除文本.updateTextRangeText()替换文本.updateTextRangeFormat()格式化文本等.本文将从以上方法介绍如何来实现对文本的操作.可参考以下步骤进行准备: 一.导入jar文件 创建Maven项目程序,通过maven仓库下载导入.以IDEA为例,新建Maven项目,在pom.xml文件中配置maven仓

随机推荐