JSPM – tooling@0.16.2

Package Exports

tooling

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tooling) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Purpose

You always need to configure webpack for each of your projects, drop webpack.config.dev.js webpack.config.prod.js for development and production envs. Install tons of common modules like loaders and frameworks. Tooling is just an apporach to skip that verbose procedure.

Technologies

What tooling supports (which means you don't have to install these dependencies yourself):

Webpack
Babel 6 + Stage-0 + Runtime + Polyfill
React with JSX
Vue/Vue-loader
PostCSS/css-modules/cssnext
Autoprefixer
Hot reloading
BrowserSync
Custom HTML template
Build or Watch
Long-term caching
Custom format, iife/umd/commonjs

Real world example, run npm start in this repo or try it out 👉

Install

Installing tooling via NPM is easy (WARN: only work for Node.js >= 4 and NPM@3):

$ npm install tooling -g

Workflow

Initial an awesome web app

$ mkdir -p awesome-web-app/src
$ cd awesome-web-app
$ npm init # if you don't have a package.json
$ tooling init react # tooling init [type], default is vue

Start hacking

$ editor src/index.jsx

import React, { Component } from 'react'
import { render } from 'react-dom'

class Counter extends Component {
    constructor () {
        super()
        this.state = {
            count: 0
        }
    }
    handleClick () {
        this.setState({
            count: this.state.count + 1
        })
    }
    render () {
        return <div onClick={this.handleClick.bind(this)}>{this.state.count}</div>
    }
}

render(<Counter/>, document.querySelector('app'))

You're all set, bring it up!

$ npm run watch

deploy to gh-pages

$ npm i -g gh-pages
$ gh-pages -d build

Run tooling -h tooling watch -h tooling build -h to see more option usages.

Set up custom index.html in package.json. see usage at html-webpack-plugin

{
    "name": "My tooling app",
    "tooling": {
        "index": {
          "title": "tooling index",
          "template": "src/index.jade"
        }
    }
}

If it's complex to configure via CLI arguments (like multi entry), feel free to set in package.json.

For advanced usage: Wiki

(Chinese) 文章: tooling 让你从 jQuery 中解脱出来

tooling