create-cycle-one-fits-all flavor

one-fits-all flavour



Run create-cycle-app myAppName.

If you use create-cycle-app@<5.0.0you will need this command: create-cycle-app myAppName --flavor cycle-scripts-one-fits-all

To use different package manager, add either --pnpmor --yarnat the end.


An elementary SPA. Each page is a cycle component and has its own state.


  • xstream observables designed for Cycle.js apps
  • @cycle/dom and snabbdom for HTML rendering and events
  • @cycle/time for easy testing
  • cycle-onionify and @cycle/isolate for fractal single state atom
  • cyclic-router and switch-path for routing
  • Custom HTML speech driver (write only) as example how to write a driver yourself


Typescript (strict) with TSLint or ES6, uses the Typescript compiler for both.

How does this flavor work

My goal is to create a flavor where you don't have to eject if you want to customize the config. Thus, the template will create a webpack.config.jsinside your app folder that defines the entry points of the app. You can add to that config and it will be merged with the config defined in this flavor.


Webpack is configured using webpack-blocks


  • npm start: Start development server listening on port 8080
  • npm test: Run the tests with mocha-webpack
  • npm run build: Generate a production-ready build content, on the buildfolder (this folder is gitignored)
  • npm run eject: Copy flavor's dependencies and configurations to the project folder, update package.jsonand remove the dependency on the flavored cycle-scripts. This is irreversible.
  • npm run clean: Delete all the files and folders that were generated by the other commands (build, start and test)

Config files

  • webpack.config.js (Added to config/after running the eject script)






  • 对 Cycle.js 的一些思考

    本篇文章主要是介绍 Cycle.js,然后谈一谈这两个多月来使用 Cycle 进行开发的一些思考和总结。文章观点较多(也许也有点杂),代码也较多,总体来说比较干。 Cycle.js 是个不一样的框架...

    2 年前
  • 启动vue项目时报错:code ELIFECYCLE

    从码云上下载下来的项目,启动vue时报错。报错信息如下: 图片描述( "图片描...

    1 年前
  • 关于package.json中的scripts命令运行说明

    首先来看package.json中的scripts配置图: clipboard.png(

    2 年前
  • 使用npm-scripts发布Github Pages

    将项目打包后部署到GitHub Pages 上是常见需求。 这里总结下通过npmsrcrips将项目发布到ghpages分支。需要使用到ghpages(

    2 年前
  • wiki-plugin-recycler

    Federated Wiki Recycler Plugin Federated Wiki Recycler Plugin This plugin, type: recycler, exte...

    2 个月前
  • web-scripts-ivan

    Web开发启动脚本、打包脚本 Web开发启动脚本、打包脚本 TODO ESDoc PM2 test Jest 统一配置环境变量 环境变量,使用库通过....

    4 个月前
  • vue lifecycle(生命周期)

    vue的lifecycle是一个非常重要的概念,因为它允许你在一个vue instance的不同阶段做不同的事情,从而实现你想要的功能。 vue的lifecycle 接口有: 接下来看看以上八个...

    2 年前
  • typhonjs-npm-scripts-test-mocha

    Provides NPM scripts for testing projects using Istanbul and Mocha for all TyphonJS NPM modules and ...

    2 年前
  • typhonjs-npm-scripts-runner

    Provides an NPM module and script which will load a JSON file searching for an Array entry then exec...

    2 年前
  • typhonjs-npm-scripts-publish

    Provides NPM scripts for prepublish and publish actions for TyphonJS NPM modules and beyond. typhon...

    2 年前


扫码加入 JavaScript 社区