# catufol > Helper tool for Webpack based SPAs using TypeScript Latest version **0.7.2** (published 2017-07-13) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install catufol pnpm add catufol yarn add catufol bun add catufol ``` Provides the command `catufol`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.7.2 | | Published | 2017-07-13 | | First published | 2016-08-22 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | none | | Module format | CommonJS | | Node | >= 5.0.0 | | Dependencies | 27 | | Known vulnerabilities | 0 (+9 in 2 direct dependencies) | | Install scripts | no | | GitHub stars | 0 | | Author | Oscar Ponce | | Maintainers | gabyvs, threeset3, wigahluk | | Keywords | Webpack, SPA | ## Links - npm: https://www.npmjs.com/package/catufol - Repository: https://github.com/wigahluk/catufol - Homepage: https://github.com/wigahluk/catufol#readme - Issues: https://github.com/wigahluk/catufol/issues - npm.io page: https://npm.io/package/catufol ## Dependencies (27) - [karma](https://npm.io/package/karma.md) 1.7.0 - [morral](https://npm.io/package/morral.md) 0.1.1 - [jasmine](https://npm.io/package/jasmine.md) 2.5.2 - [webpack](https://npm.io/package/webpack.md) 1.13.3 - [zone.js](https://npm.io/package/zone.js.md) 0.7.2 - [es6-shim](https://npm.io/package/es6-shim.md) 0.35.3 - [ts-loader](https://npm.io/package/ts-loader.md) 2.1.0 - [css-loader](https://npm.io/package/css-loader.md) 0.28.4 - [raw-loader](https://npm.io/package/raw-loader.md) 0.5.1 - [url-loader](https://npm.io/package/url-loader.md) 0.5.8 - [file-loader](https://npm.io/package/file-loader.md) 0.11.1 - [html-loader](https://npm.io/package/html-loader.md) 0.4.5 - [json-loader](https://npm.io/package/json-loader.md) 0.5.4 - [less-loader](https://npm.io/package/less-loader.md) 2.2.3 - [null-loader](https://npm.io/package/null-loader.md) 0.1.1 - [style-loader](https://npm.io/package/style-loader.md) 0.18.1 - [karma-jasmine](https://npm.io/package/karma-jasmine.md) 1.1.0 - [karma-webpack](https://npm.io/package/karma-webpack.md) 2.0.3 - [tslint-loader](https://npm.io/package/tslint-loader.md) 3.5.3 - [reflect-metadata](https://npm.io/package/reflect-metadata.md) 0.1.10 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 1.16.2 - [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 2.28.0 - [karma-junit-reporter](https://npm.io/package/karma-junit-reporter.md) 1.2.0 - [karma-chrome-launcher](https://npm.io/package/karma-chrome-launcher.md) 2.1.1 - [karma-sourcemap-loader](https://npm.io/package/karma-sourcemap-loader.md) 0.3.7 - [istanbul-instrumenter-loader](https://npm.io/package/istanbul-instrumenter-loader.md) 1.2.0 - [karma-coverage-istanbul-reporter](https://npm.io/package/karma-coverage-istanbul-reporter.md) 0.2.3 ## Alternatives - [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads - [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads - [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads - [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads - [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads ## Recent versions - 0.7.2 (latest) — 2017-07-13 - 0.7.1 — 2017-06-19 - 0.7.0 — 2017-06-05 - 0.6.3 — 2017-05-17 - 0.6.2 — 2017-04-17 - 0.6.1 — 2017-03-29 - 0.6.0 — 2017-02-22 - 0.5.0 — 2017-01-10 - 0.4.1 — 2016-11-17 - 0.4.0 — 2016-11-17 - 0.3.0 — 2016-11-08 - 0.2.0 — 2016-11-02 - 0.1.11 — 2016-10-11 - 0.1.10 — 2016-10-10 - 0.1.9 — 2016-10-10 - … 9 more at https://npm.io/package/catufol/versions ## README [ ![Codeship Status for wigahluk/catufol](https://app.codeship.com/projects/a692f220-f6ce-0134-948f-3e14bfe21487/status?branch=master)](https://app.codeship.com/projects/210582) Catùfol ======= A helper tool on the top of Webpack, Karma, TypeScript and other tools that helps to reduce configuration steps. The tool will try to work with a minimum of configuration and will use conventions and other project files to extract configuration settings whenever it's possible. ### About the name Catùfol is a Catalan word that is used to name the pots or containers that ares used to carry water in a water wheel or _noria_. There is also a Romainan word (without the accent) that means _potato_. You can chose whichever meaning you like more :) ## Conventions Catùfol relays on folder structure and file name conventions in order to work properly. The main idea is to minimize configuration settings, as a trade off, we need to follow some conventions on how we structure our app. ### Folders ``` yourApp/ ├── app/ // Here goes all your app code │ ├── main.ts // Your entry point file for Webpack │ ├── helloTest.spec.ts // Test files are expected to have the extension .spec.ts │ └── index.html // This is the HTML template used to generate the final index.html on your build ├── coverage/ // Generated folder. Coverage reports will be created here ├── build/ // Generated folder. Your packaged files will be created here ├── typings/ // Generated folder. Typings use this folder for type definitions ├── node_modules/ // Generated folder. NPM use this folder for keeping dependencies ├── catufol.json // Catufol configuration file ├── package.json // NPM configuration file ├── typings.json // Typings configuration file ├── test.loader.json // Karma entry point └── tsconfig.json // Configuration for the Typescript compiler ``` * `app` contains all the source files, including tests * `build` will be used for generated files and its content will be deleted on every build. It should not be versioned * `coverage` will contain the test coverage reports and it should also be ignored from version control _As a general rule, avoid creating your own content in generated folders or files as they can be overwritten by different tools._ #### Files * `app/main.ts` entry point for the application * `app/index.html` template to be used to generate the index.html file for loading the app * `test.loader.js` entry point for Karma ## Dependencies * __Webpack__ This project is sort of a Webpack wrapper, without it, it doesn't make too much sense * __TypeScript__ This project is very opinionated on languages and it assumes you'll use TypeScript, although it will be compatible with JavaScript sources too * __Karma__ It is assumed that your project is using Karma to run tests. No plans to support other tools * __Jasmine__ For now we assume your project is using Jasmine for unit tests * __NodeJS 5.0__ or greater ## Usage Install it with NPM: ```shell npm install catufol ``` You may want to add a configuration file `catufol.json`: ``` { "appName": "apps", // It will default to your project name in package.json if not provided "devServerPort": 8081, // Defaults to 8080, changes the webpack dev server port "exportJQuery": true, // Defaults to false, when true makes jQuery available in your modules as `jQuery`, `$`, and `window.jQuery` "vendors": [ // Modules included here will be included in a vendors.bundle.js file instead of bundle.js "reflect-metadata", "es6-shim" /* ... */ ], "devEntryFile": "./app/main.ts", // It will default to ./app/main.ts if not provided "prodEntryFile": "./app/main-build.ts", // It will default to ./app/main.ts if not provided, "karmaFiles": [/* ... */] // This can be used to insert files in the files configuration for Karma. // If you need any.By default catufol will load some needed files. } ``` It may be helpful to add some scripts to your `package.json` file: ``` { "scripts": { "build": "catufol -b", "start": "catufol -r", "test:debug": "catufol -i", "test": "catufol -t" /* ... */ } } ``` Test loader file for __Karma__ is expected to be on the root of your project and to be named `test.loader.js` and if you are using AngularJS 2.0 it may look like this: ```javascript Error.stackTraceLimit = 20; var context = require.context('./app', true, /\.spec\.ts$/); context.keys().forEach(context); var testing = require('@angular/core/testing'); var browserDynamic = require('@angular/platform-browser-dynamic/testing'); testing.setBaseTestProviders( browserDynamic.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, browserDynamic.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS ); ``` ### Optional loaders * **Sass** If you want to use Sass you will need to install a Webpack Sass Loader. A recommended version is **3.2.0**. Newer versions will use Webpack 2.0, which is not compatible with the current version of Catùfol. ### Build Folder The generated `build` folder will have the following structure: ``` build/ ├── yourApp/ // The folder will be named with the same name you used in catufol.json │ └── bundles/ │ ├── bundle.[sha].js // Bundled file for your app │ ├── bundle.[sha].js.map // Source map for your main bundle file │ ├── vendor.bundle.[sha].js // Vendors code bundle │ └── vendor.bundle.[sha].js.map // Sourcmap for vendors code ├── buildinfo.json // A file containing details about the build └── index.html // HTML that will work as your entry point ``` ### CLI options * `-t` `--test` will run unit tests once using PhantomJS. Commonly used in CI environments * `-i` `--interactive` will run tests in interactive mode using Chrome * `-hl` `--headless` will run tests using headless Chrome * `-r` `--run` will run Webpack Development Server * `-b` `--build` will create the final artifacts using Webpack ### Testing To run the tests, first install webpack and rxjs locally (do not save or include in package.json) with `npm i webpack`, and `npm i rxjs`. Run `npm test`. --- _Source: https://npm.io/package/catufol · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._