npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bms-webpack-js-example

v2.4.1

Published

## TODOs - [x] Create a REPO for ES6 JavaScript Example - [x] Create a Repo for Typescript Example - [x] Improve yarn build script to upload only bundled assets - [ ] Improve README.MD Documentation for usage

Downloads

12

Readme

Bold ES6 JavaScript Scaffold Configuration

TODOs

  • [x] Create a REPO for ES6 JavaScript Example
  • [x] Create a Repo for Typescript Example
  • [x] Improve yarn build script to upload only bundled assets
  • [ ] Improve README.MD Documentation for usage

About

The goal of this tool is to allow us as developers the option to use ES6 and/or typescript if we so choose. The goal of this is to just enable us to have more options available to us if we so desire. For medium/large projects, this scaffold may be a viable option as having access to modules and code reuse can hasten our development time/workflow. This current example showcases ES6 with JavaScript.

Update gitIgnore

  • Ensure .gitignore reflects similar to this one.
*___jb_old___*
*___jb_tmp___*
*.lock
.DS_Store
theme.lock
config.yml
settings_data.json
.idea/
.vscode/
node_modules/
src/node_modules
locksmith-content-variables.liquid
locksmith-variables.liquid
locksmith.liquid
bold-common.liquid
*.shogun.*
config.*.yml
*.cache*
src/dist/*

Pre-requisites

Getting Started

Ensure you are within the src directory, from project root cd src

Install node dependencies

# Run this if you are using yarn
$ yarn

# Or run this if you are using npm
$ npm install

Building a bundle using an Entrypoint and Webpack

This project relies on webpack in order to build the file into a bundle. For configuration options, and file naming, will need to change the following webpack.config.js

The main point of interest within this file is the following:

module.exports = {
  entry: {
    BMSBlackFridayCoupons: './builds/BMS-BlackFridayCoupons.js'
    //something: './builds/anotherEntryPoint.js'
  },

The key for the object entry, will be the name of the bundle that will be placed within the shopify assets/ directory. So For example: BMSBlackFridayCoupons: './builds/BMS-BlackFridayCoupons.js' This takes the file found at the location /src/builds/BMS-BlackFridayCoupons.js and bundles it, outputing it at the location of /assets/BMSBlackFridayCoupons.bundle.js

This is because of the specified output within webpack.config.js

  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, '../assets')
  }

Working locally

# Run this if you are using yarn
$ yarn start

# Or run this if you are using npm
$ npm start

This will start watching for file changes related to the entry point for the files being watched. This command concurrently runs theme watch (for the default development:) environment from config.yml This in short allows to develop the files within es6, and then have the bundle be uploaded concurrently.

Production build

To create a production build (Which minifies and optimizes the bundle code) , run the following command

# Run this if you are using yarn
$ yarn build
# Or run this if you are using npm
$ npm run build

This will create a javascript file in the /dist folder, this is for compiling the Typescript into Javascript. The bundled JavaScript is then automatically moved to the assets folder, as a minified bundle. Once this command has completed, it will then run bmstk This will then upload the bundled assets to the store. For more information on bmstk please see here

Using Bold ES6 JavaScript Scaffold Configuration

Read the Full Usage guide (Coming soon?)