Following similar motivations and inspirations as other Project Evergreen projects like Create Evergreen App, Greenwood aims to provide a build and development workflow designed for the modern web and leveraging great open source projects in the NodeJS ecosystem.
Read on to learn more about how we put them all together for you!
developcommand provides a development workflow with all the features you would need like file watching and live reload, source maps, and more using webpack-dev-server.
This allows us to provide fine tuned workflows for both development and production but all you have to do is use the CLI. 💯
Note: As powerful as webpack is, it does provide a lot of seemingly "magical" functionality out of the box, in particular its ability to use
importto turn just about anything into a module (css, images, text files, etc). While this is convenient at build time and for development, being able to use
Greenwood promotes an "evergreen" build that ensures that the code delivered to users is as modern as the code all based on real browser usage and support statistics. Automatically!
Greenwood builds off of Babel and PostCSS by leveraging the
env presets available for Babel and PostCSS, which are made possible courtesy of an awesome tool called Browserslist. Essentially, Browserlist allows querying of CanIUse data to determine, based on the browser query provided, what features are / aren't needed for transpilation. This in turn allows Babel and PostCSS to intelligenty transpile only what's needed for the features that are missing, thus ensuring an "evergreen" experience for users and developers. Nice. 😎
So to target modern evergreen browsers for example, a .browserslistrc would look like this:
> 1% not op_mini all not ie 11
When run against the
browserslist, we can see what the support will be for that configuration will be:
$ npx browserslist and_chr 67 and_uc 11.8 chrome 67 edge 17 firefox 61 ios_saf 11.3-11.4 ios_saf 11.0-11.2 safari 11.1
As discussed above, Greenwood is able to leverage a build that can intelligently transpile projects to meet the widest use case of modern evergreen browsers as well as IE11! This means your users will get the syntax their browsers understand (courtesy of core-js) while allowing developers to write modern code. (Stage 2+ with some exceptions.)
The full list of support browsers supported right now is:
$ npx browserslist and_chr 75 and_uc 12.12 chrome 75 chrome 74 edge 17 firefox 67 ie 11 ios_saf 12.2-12.3 ios_saf 12.0-12.1 safari 12.1 samsung 9.2
This is all essentially made possible by the amazing work of the caniuse.com which you can visit to get up to date information on what features major browsers are supporting. The more you know! ⭐
It is our goal to make IE11 / legacy browser support opt-in through our Polyfills Plugin so that by default Greenwood would be exclusively "evergreen".
The good news is modern evergreen browsers like Chrome, Safari, and Firefox already support a lot of these features for Web Components right now! Unfortunately, Edge is still lagging behind a little bit (and of course IE11 is its own story). Here is what the current landscape of modern browser support looks like.
For how to handle polyfills with Greenwood, please see our polyfills plugin!