Nth Phonetic Mnemonic

    atlas-webpack-init

    1.0.4 • Public • Published

    atlas-webpack-init

    A CLI tool for generating production webpack web apps with necessary boilerplate.

    Travis


    install

    npm install -g atlas-webpack-init
    

    why

    As awesome as webpack4 is, it still requires boilerplate if you're trying to create production-ready webapps. There are tasks like minifying, gzipping and content-hashing that I would rather not think about every single time I want to make a new HTML widget. For small-medium apps, this stuff is pretty much the same 99% of the time.

    ES6/babel-transpiling is already configured. If you need more features, edit the .babelrc and install any new babel plugins. Provides a hot-reload dev-server and hot-reload test runner. Bootstrap test file already imports what you need from mocha and chai. HTML/CSS/JS minification, stylesheet aggregation, content-hashed filenames, and gzipping are already configured for you. Provides static local server for your bundle. If you're building an app with webpack4, chances are it will start out looking like a lot like this. You can easily modify and extend this to fit your own needs as your project grows. There are no dependencies, only a few absolutely necessary dev-dependencies.

    examples

    using the cli tool

    with args

    You can specify a name, description, author and index.html title. At least one field is required, the rest are optional:

    webpack-init -n my-app -d "my description" -a "atlassubbed <atlassubbed@gmail.com>" -t "Page Title"
    

    without args

    If you don't specify any args, you will be prompted to enter the name, description, author and index.html title. In this case, all responses are optional. If you don't specify a name, it will default to "webpack-app":

    webpack-init
    

    specifying an author

    If you specify a full author (with a name and email), the generator will automatically initialize a repository and perform an initial commit.

    the generated project

    structure

      webpack-app/
        src/
          index.html
          index.js
        test/
          index.test.js
        .babelrc
        .gitignore
        LICENSE.md
        README.md
        package.json
        webpack.common.js
        webpack.dev.js
        webpack.prod.js
    

    scripts

    You'll be provided with five scripts to simplify your workflow:

    1. npm run test-server: pretty mocha test output to CLI with hot-rerun.
    2. npm test: pretty mocha test output to CLI.
    3. npm run dev-server: run your app at localhost:8080 with hot-reload.
    4. npm start: build and serve production app at localhost:3030.
    5. npm run build: builds fully minified, gzipped app in dist/ folder.

    npm install

    Once you've generated my-app, all you need to do is:

    cd my-app
    npm install
    

    todo

    I'd like to have a global executable called atlas which has the following sub-commands:

    1. npm: generates a minimal npm starter app.
    2. webpack: generates a minimal webpack starter app.
    3. repo: automatically sync your project to github or fork/clone existing projects.
    4. logout
    5. whoami
    6. login: Not needed, thanks to atlas-recursive-auth

    As of right now, the atlas command only has subcommands 3 and 4 above. atlas-npm-init and altas-webpack-init (this package) are their own commands, but I'd like to turn them into 1 and 2 above, respectively. The atlas command should then be responsible for initializing pretty much everything in a new project.

    caveats

    react

    React is not assumed, it only takes a minute to install react and the associated babel plugins.

    license

    LICENSE.md defaults to MIT. Currently, there's no option to change it from the CLI. Changing it manually would simply require editing a line in package.json and editing the LICENSE.md file itself.

    private

    By default, packages will be private -- be sure to delete that line if you plan on publishing your generated package.

    sinon and sinon-chai

    When I was writing this package, I included sinon and sinon-chai, but I removed them because I found myself not using them in my tests. sinon is great, but why don't I use it? Spying, stubbing and mocking is pretty easy without it.

    git initialization

    Currently, the generator will automatically initialize a repo and make the first commit if you specify a full author. There's no way to turn this off right now. I understand that this can be undesirable, but I always needed these steps, so I figured it would just be a default.

    Install

    npm i atlas-webpack-init

    DownloadsWeekly Downloads

    15

    Version

    1.0.4

    License

    Apache-2.0

    Unpacked Size

    30 kB

    Total Files

    23

    Last publish

    Collaborators

    • atlassubbed