项目作者: kriswep

项目描述 :
A modern and modular JavaScript boilerplate setup
高级语言: JavaScript
项目地址: git://github.com/kriswep/modern-modular-javascript.git
创建时间: 2016-11-06T12:29:36Z
项目社区:https://github.com/kriswep/modern-modular-javascript

开源协议:The Unlicense

下载


Modern, modular JavaScript

This is the JavaScript boilerplate stack I set up late 2016.
It was heavily inspired by js-stack-from-scratch, but was simplified in some areas and adapted to my wishes.

Code examples inspired by a great composition>inheritance tutorial.

It comes with a fast running, simple to grasp, jest test setup.

All dev-tools are exposed as npm scripts.

To get started, clone this repo and run npm install (or yarn install if you prefer).

Hope somebody may find it useful.
Ideas and contributions very welcome!

File structure

The bulk of your development is supposed to happen in the src folder.
There you’ll find client, server and shared subfolders you can fill accordingly

The dist folder should contain your static assets (here only index.html) and the generated client JavaScript bundle.

node_modules, well, contains your modules.

The following folders will be generated by the included scripts and should not be modified manually.

lib contains compiled JavaScript, whoch can be used by an node.js server.

coverage and .nyc_output contains files releated to test coverage.

Included scripts

You can run all scripts either with npm or yarn. For the sake of briefness, npm is used in the following. For yarn just replace npm with yarn

  • npm start : Starts node server serving the build client bundle
  • npm test : Run the test suite
  • npm run lint : run eslint, we use airbnb style
  • npm build : Build the client bundle
  • npm run compile : Compile server side (node.js) JavaScript
  • npm run dev: Start the development, live-reloading, server
  • npm run coverage: Calculate test coverage.

For some task there is a watch task, which can run the corresponding task
after file cahnges.

  • npm run test:watch: Run tests repeatedly
  • npm run lint:watch: Run eslint repeatedly
  • npm run coverage:watch: Run coverage task repeatedly
  • npm run fulltest: Run eslint and test repeatedly

Ideas

This boilerplate doesn’t set up any UI.
You could add whatever you want, like React
or maybe even use custom elements v1.

Also backend implementation is kind of simplistic,
this setup is more focused on frontend JavaScript for now.

License

Licensed under the Unlicense (this is a permissive open-source license and doesn’t mean
this project is not licensed!)