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

@crasman/create-stage-webpack

v1.25.2

Published

Stage webpack setup script

Downloads

15

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

crasman-tiina-heikkilacrasman-tiina-heikkilamoseshomoseshokimjakimjaphcrasphcras_crasman_crasmanmlcrasmlcrasjoonavajoonava

Keywords

Readme

@crasman/create-stage-webpack

CRA (Create React App) inspired setup script for setting up project that supports React and Vue frameworks out of the box with Stage / Studio environments in mind.

studio-project-generator vs @crasman/stage-webpack: differences / breaking changes

  • @crasman/stage-webpack only bundles assets that are referenced within files (e.g. icons) and hashes the output filename for better long time cache. If you need to reference some icons / images from Stage, you need to place these files inside the static folder that is uploaded as is, without optimization
  • Webpack favors the ES6 import / export because that allows tree-shaking (getting rid of code that isn't referenced). module.exports doesn't break anything but for more efficient bundling, it's better to use import & export
  • Be prepared for lots of CSS / SCSS related lint errors / warnings. Linter changed from sass-lint to stylelint to allow fix operation during build and with editor's stylelint plugin. fix and lint scripts are added to package.json to help this transition.

Setup project

  1. Prepare to answers to the following questions, which will be asked while the new project is being setup:

    • Studio ID
    • Folder ID of the Studio folder, that we will be uploading in to
    • Path to that folder on Studio (for example: web/v1/)
    • Site's admin url
    • Site's public url
    • Project ID (Used for compiled js and css file names)
    • Indentation style: 2 or 4 spaces, or tabs.

These settings (except indentation style) can be later found and edited at stage-webpack.config.js if any of these change or haven't been decided yet.

  1. run npx @crasman/create-stage-webpack <target-folder> or yarn create @crasman/stage-webpack <target-folder> to setup new project / update existing project created with studio-project-generator.
  2. Go to newly created / updated directory

If new project

  1. Install dependencies
  2. Setup git
  3. Read project's README.md for available commands and useful editor plugins

If updating studio-project-generator project

  1. Delete package-lock.json / yarn.lock & node_modules
  2. Install dependencies
  3. Try to run the lint / fix commands defined in the project's README.md. Prepare for lots of CSS related errors as the linter has changed from sass-lint to stylelint
  4. Delete gulp folder when ready with setup

Setup branch helper

See branch-helper.md to learn how to add branch support to Stage.