I'm looking for NPM toolset to help me to create baseline for Web projects with vanilla JS. So, as we set up Angular projects with angular-cli ng init command, React projects with create-react-app, is there any recommended NPM global tooling to set up all common toolchain (mainly Webpack, Babel and some development server with hot reloading/change detection) for non framework based projects?
Thank you for any suggestinos
I'd look at yeoman and available generators to pick one that suits your needs the most.
Here's a couple that might fit you:
webapp generator
babel boilerplate
grunt provides scaffolding. There are templates available, or it's fairly easy to create your own.
Related
The most popular boilerplate for vue/electron usage, seen here: https://github.com/SimulatedGREG/electron-vue
Is outdated, and only uses vue cli2.
The quickest, and easiest way I've found to get Vue and Electron playing nice together is vue electron-builder.
To use, set up a project with Vue CLI3 using
vue create my-project
then CD into that directory, in this case "my-project", and run
vue add electron-builder
This sets up barebones scaffolding that allows vue and electron to play nicely from the get go. You can test your work by launching an unbuilt test version using
npm run electron:serve
and, when you are ready for deployment, may use
npm run electron:build
to build. This vastly simplifies the process, seen elsewhere, of dealing with a giant over engineered boilerplate or trying to write out relative pathing so your builds and dev environments both work identically.
This repository contains the starter template for using vue-next with the latest electron.
I started to learn electron & vue by the great project electron-vue. This project is also inspired from it.
https://github.com/ci010/electron-vue-next
I am looking to work on an Angular2 datepicker component as if for release and inclusion in multiple projects. What is the best way to structure the project for this compared to a regular Angular2 project built with angular-cli? Are there any examples of good starter projects/seeds for such a task? Or should the component library actually be an angular2 application itself?
My initial assumption was that I could just create a standard project with angular-cli which has a single module (e.g. MyDatepickerModule) which contains a hierarchy of components forming the datepicker however I don't know if this is the best way as I don't need everything that a full application provides.
Thanks for any guidance!
I would publish the library with AoT compatibility in mind.
This means compiling the source using the ngc compiler. In the distribution package I would publish the JS source, original html/css files, d.ts typings files and the ngc generated metadata.json files.
I recommend publishing the JS source with es2015 modules since this will make your library tree shakable. I would target es5 JS, but with es2015 modules . TypeScript allows for this hybrid mode by setting module to ES2015 and target to es5 in tsconfig.json.
Publishing these files will make your library AoT compatible and Tree shakable.
This is all the consuming application needs in order to AoT compile your library into their complete application.
It's not recommended to publish TypeScript in your package since this would require the consumer to replicate your build environment (typings + TS compiler version).
You can also publish a JiT compatible umd bundle with inlined templates and css. This can be helpful since it might not be practical do AoT during development since compilation is a bit slow. The umd bundle will make it possible to use your library in a JiT based dev environment. For production though you should definitely use the AoT version.
The CLI is not ideal for publishing libraries since CLI is primarily a tool for building complete applications. They might support libraries better in the future though.
Check out https://github.com/angular/material2. A work in progress, it's a library of controls and themes for Angular2 applying Material Design and is an excellent source for learning to build your own control library.
I'm having an Ionic project which I need to keep in github. When you start an Ionic project it auto generates a lot of library files. Do I need to keep all those library files while pushing the project to the github repo ? Is there something similar to maven available for Ionic projects which I can make use of ?
In JavaScript projects, we tend to use npm or bower. npm is the main one used these days (certainly has the largest ecosystem) and is also the one I mainly use, but bower certainly has quite a few front-end orientated modules that you can use.
npm comes packaged with NodeJS automatically; bower will require NodeJS to function as well, but is installed separately.
I'm new to Ember.js and I'm use to just typing in rails project33. But, when I want to start a new Ember project I'm going:
mkdir project43 && cd project43
npm install -g generator-ember
yo ember
This brings up all the boilerplate code in my folder which is fine, but is there not a more simple way to jumping into creating a new application? And does Ember REALLY need all this boiler code? It seems...excessive.
You are starting a new project and you are using Yeoman so what you are doing is specific to the tool that you are using. So with Yeoman you have to make a directory then cd into it and run yo ember. Having to do npm install -g generator-ember (which you do once to install node package globally) is to install the generators for ember that Yeoman needs for you to run commands like yo ember from the command line for use with Yeoman with Ember.
Now if you were to use a tool called ember-cli http://iamstef.net/ember-cli/ creating a new project would be a little different you have two options. One is just running ember new <appname> from the command line that will create a new folder with whatever name you used for the 'appname'. The second way with ember-cli is similar to Yeoman where you would make a new directory, cd into that directory and run ember initfrom the command line.
Both Yeoman and ember-cli install files and setup a folder structure for you. I believe these files and folders are what you are calling boilerplate. When you look into your rails project you will see alot of boilerplate if you will but its there for a reason. All of this boilerplate is helping you and assisting you in not having to setup things like a build solution, installing dependencies, testing solutions, css compilation etc. Ember-cli and Yeoman are built differently under the hood and implement different things but essentially set out to solve the same thing, tooling for building client-side apps.
If you just making a quick app you can do something similar to http://emberjs.com/guides/getting-started/ however once you app starts to grow having a clear separation of files and a application structure will be of benefit.
Hope this helps, hope you have fun learning ember.
Do you know a package manager for web assets?
I'd like something that can download libraries such as jQuery so I can plug them into my asset pipeline. The js.* python packages for fanstatic are close, but they pick a single "latest" version of the library, which can lag a few releases behind.
Google's js cdn has the metadata for a few of them, but is mostly designed to be downloaded by the browser directly.
I've found these package managers for in-browser javascript:
CPM (CommonJS package manager), focused on Dojo packages, with an archive at http://packages.dojofoundation.org/ (about 60 packages). CPM augments the CommonJS format with a mappings field to describe how modules from dependent packages can be require()d
Caolan's Jam, whose archive is at http://jamjs.org/packages/. Here is the Jam packaging guide.
Ender piggybacks on npm for package management, and provides a client that looks like AMD (I'm not sure about AMD compatibility, which according to a bug report is left up to each package). Here are the Ender packaging docs. Here are packages with the ender keyword. Ender doesn't focus on packaging existing libraries, though its Jeesh starter pack is a modular, mostly-compatible replacement for jQuery.
Most of these can publish in the AMD format for browser loaders, and can be loaded by RequireJS. They also tend to use the CommonJS package format (also used by npm) for their package.json metadata.
I also found XStatic, which seems to be a less-active version of fanstatic, and like fanstatic wraps the libraries in Python packages. It has the same limitation (versions tend to lag), but writing a wrapper package seems simple enough that I can bake my own updates.
BPM and fanstatic are aware of non-js assets and can merge or minify CSS.
Bower, the package manager, from Twitter.
Bower is a package manager for the web. Bower lets you easily install
assets such as images, CSS and JavaScript, and manages dependencies
for you.
Bower does package management and package management only.
Bower requires Node and npm (and possibly git for some bower packages). It is also included in Yeoman, a set of tools to help developers build modern web apps.
If you are on Visual Studio 2010, NuGet is best
http://nuget.org/
The author of RequireJS has also created a package / dependency manager called Volo:
Create browser-based, front-end projects from project templates, and
add dependencies by fetching them from GitHub. Once your project is
set up, automate common tasks.
volo is dependency manager and project creation tool that favors
GitHub for the package repository.
At its heart, volo is a generic command runner -- you can create new
commands for volo, and you can use commands others have created.
Just use npm. It has tons of browser modules in it already, and is way larger than the other options:
http://www.modulecounts.com/