JSPM – tooling@0.17.0

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.

Extend default config

Sometimes settings in package.json is not powerful enough, you can extend the webpack.config.js that Tooling uses to build your app by simply dropping tooling.js in your project directory:

/**
 * @param {Object} config - webpack config which merge cli options and settings in package.json
 * @param {Object} options - cli arguments
 * @return {Object} config - new webpack config
 */
export default function (config, options) {
    config.entry = './some/else/entry.js'
    config.postcss.push(require('new postcss plugins'))
    return config

    // or if you like object spreading...
    return {
        ...config,
        entry: 'something else'
    }
}

For advanced usage: Wiki

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

tooling