@afuggini/scripts-frontend

    0.7.0-beta2 • Public • Published

    @afuggini/scripts-frontend

    npm version JavaScript Style Guide

    A highly shareable and customizable webpack config.

    Features

    • Dynamic Imports (Code Splitting)
    • ES2017+
    • JSX
    • Linting via @pixel2html/eslint-config
    • Parsing all js (ours and vendor, vendor is cached though)
    • Sourcemaps for debugging
    • Tree-Shaking
    • Extend and customize the underlying config

    Getting Started FAST!

    npm install --dev @afuggini/scripts-frontend
    npx scripts-frontend development

    🔥

    We have a set of opinions towards how the files should look like for it to be a zero-config situation.

    # Your project root
    .
    ├── dist
    │   └── assets
    │       └── js
    │           └── main.js # Compiled file
    └── src
        └── assets
            └── js
                └── index.js # Your starting point
    

    That is to be compliant with the defaults we were using on our generator-frontend package, however this is easy to customize.

    Frontend Generator

    If you're using our Frontend Generator or our Shopify Generator then you don't have to to anything since they already use this package. But if you're coming from scratch this is what you need to do:

    Node

    Create an index.js with the following:

    const { compiler } = require('@afuggini/scripts-frontend')
    
    // Options are development, production or debug
    const mode = 'development'
    console.log(`Compiling in ${mode} mode...`)
    
    compiler(mode)
      .then(() => console.log(`All done!!`))
      .catch(e => console.log(e))

    You can now run node index to get your JS compiled.

    Gulp

    const gulp = require('gulp')
    const { compiler } = require('@afuggini/scripts-frontend')
    
    gulp.task('start', () => compiler('development'))
    gulp.task('build', () => compiler('production'))
    
    gulp.task('default', gulp.series('start'))

    Customizing the underlying config

    To customize your setup you need to create a scripts.config.js file at the root of your project that file will be a function that takes 2 parameters:

    • config (the default config) See Webpack Config
    • webpack (a webpack instance so you can use plugins and whatever)

    scripts.config.js

    module.exports = function(config, webpack) {
      // tweak away esketit
    
      // Always return the config
      return config
    }

    Shopify

    Since we do quite a bit of Shopify ourselves we added some opinionated list of shopify plugins which you can access like this:

    scripts.config.js

    const { getShopifyPlugins } = require('@pixel2html/scripts-generator')
    
    module.exports = (config, webpack) => {
      config.plugins = getShopifyPlugins()
    
      // So the sourcemaps work on Shopify
      config.output.filename = '[name].js.liquid'
      return config
    }

    Shopify Generator

    We also supplied a fully opinionated Shopify config which you can setup like this:

    scripts.config.js

    const { createShopifyConfig } = require('@afuggini/scripts-frontend')
    
    module.exports = config => createShopifyConfig(config)

    🔥

    This is compliant with the way our Shopify Generator works meaning your starting point is:

    src/scripts/index.js

    and the bundle outputs to:

    .deploy/assets/main.js.liquid

    While splitting vendor code from node_modules to:

    .deploy/assets/vendor.js.liquid

    The liquid extension is used for sourcemaps support via Shopify Cache busting situation for assets.

    Check the examples folder for some reasonable examples.

    PRs Welcome!

    Open an issue so we can discuss about it, then file a PR. 😍

    Keywords

    none

    Install

    npm i @afuggini/scripts-frontend

    DownloadsWeekly Downloads

    2

    Version

    0.7.0-beta2

    License

    MIT

    Unpacked Size

    23.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • afuggini