I am using webpack to build my react project and I want to get buildTime and hash of the build and save in a json file.
I tried it using getStats method of compilation object using compiler hooks but I couldn't succeed. So, What's a better way of doing this? I do not want to use any third party plugins, neither using npm script. It has to be done exclusively from the webpack config file.
Related
Can I use a module bundler for an existing apache/mysql/php backend app (running in docker)? Im adding React components just here and there in some pages. Currently I`m using Babel (not a bundler) but I want to be able to add imports too.
Can some bundler build just the frontend portions of my app (maybe by ignoring php tags)?
As I understood from documentation setting up Grunt requires access to the webpack, which from my understanding is hidden when project is using create-react-app and we do not eject out of it. Is it possible to set up Grunt library for such project somehow?
In case if it matters, I think I need Grunt in order to set up a plugin for Retire.js library in order to check libraries for known vulnerabilities and I would like this process to be as automated as it is possible.
All my VueJS projects use at the beginning the same baseline :
Vuex
Vue Router
Immutable.js
MathJS
MomentJs
ChartJS
Plus, all my projects have quite the same "index.js" file.
Is there a way to have a command line (preferably based on Vue CLI) that can generate a project with a pre-coded "index.js" file and a package.json with those above dependencies ?
It sounds like you are wanting to use the Vue CLI to create a project. However, you additionally want some default npm packages to be installed and imported into your index.js file.
Answer: no. this functionality does not exist (currently)
Some Suggestions:
Open a feature request here. If you did do a feature request, you should descibe it in a more general way. For example 'allow the ability to specify npm packages on project creation' opposed to specifically installing ChartJS, Moment and the other ones. That's too specific, that will get shot down and closed in a heart beat.
Create a repo with the project structure and packages you want and always start from that repo (opposed to using vue cli)
Write your own custom node cli to interface with vue cli that handels your extra steps for you. You could easily write a node (console program) that executes the steps you want. Basically, create the vue project, npm install what you need, generate an index.js with your package imports.
I think the easiest route is to just create an empty vue project how you want it. Save that repo as 'vue-boilerplate' or something and just always start off with that empty project opposed to doing vue create every time.
In my personal opinion, I think going through all this to npm install 3 packages and add the imports to a js file isn't entirely worth it unless you find yourself creating a massive amount of projects that will all require the exact same setup.
Angular has a similar idea called schematics but I do not see an equivilant within Vue as of yet.
My web development is principally intranet sites and web front-ends for embedded devices using NodeJS.
My current structure is to have everything in one NPM package. I run NodeJS behind Nginx, and let Nginx serve css/image/client-side-javascript files directly from public.
I'm starting to use VueJS and Vuelidate, both of which use the now ES6 modules system - e.g. import { required, minLength } from 'vuelidate/lib/validators'.
While I've (rather hackily) made these work with my current structure, I think the time has come to get into the world of Javascript build-systems/bundlers.
If I use VueJS's preferred option of WebPack, how should I change the structure of my code?
Should I have one NPM package for the frontend (generated by vue-cli init) and another for the Express backend app?
Should I put my Express App into the generated Vue frontend package?
Should I use browserify to do the job of WebPack and stay with my existing structure?
Or something else entirely?
I’m not sure why you’re intent on putting your JavaScript code in other packages. If you have an application then you can keep your raw JavaScript files in there, along with the build script(s). Someone should be able to check your application out and be able to build it.
If you’re looking to get started with a build system, then a nice “bridge” might be to use Mix, a project created by Laravel for building front-end assets such as Sass and JavaScript. It uses Webpack under the hood, but in turn exposes a more user-friendly, fluid API.
If you go down this route, then you could put your raw JavaScript files in a lib/ or src/ directory. You could then use Mix to compile these components like this:
mix.js('lib/your-entry-point-script.js', 'public/js/app.js');
Your entry point script would just be the script that requires all your other scripts and components and the script that you want “built”. Mix would then compile that and place the resultant script at public/js/app.js.
Mix itself is just a npm package, so all you need to do is npm install laravel-mix --save-dev.
You can read more about Mix at https://laravel.com/docs/5.7/mix
I have written a node module and published it as a node package. It works when I use it in backend applications (pure nodejs, no babel or transpile).
However, when I use this same npm module in the frontend (in my case a 'create-react-app') application, it breaks. Bellow is the exact error:
Module parse failed: Unexpected token (14:2)
You may need an appropriate loader to handle this file type.
The error is referring to my use of the spread operator (...). I would prefer not to have to rewrite the library, and would rather add some kind of transpiler to package my library. I haven't found a clear solution to this, they are all very convoluted.
I have tried using rollupjs, and https://github.com/insin/nwb. Neither sadly seem to be what I'm after.
Run my code:
You can install the library to your create react app using npm i cbs-proxy-client#0.0.3. And then add the line const cbsProxyClient = require('cbs-proxy-client') or import cbsProxyClient from 'cbs-proxy-client' to any of your scripts.
Advice would be appreciated :)
A library used for frontend is expected to package an already transpiled version of the source javascript. To do this, you might want to use rollup as a build process in your library to create a bundle file. You can use babel to transpile your code for desired browser support. Let's say the bundle file is saved in dist/bundle.js. Now you will modify the package.json to load this bundled file as the entry file using main parameter in package.json
If you are building using rollup or webpack, it is easy to miss that the bundled file should be prepared as a library. This means that importing the file using commonjs should be able to export correct variables. A typical webpack build removes such exports because it is supposed to work straight on a browser. This blog is in my bookmarks titled "js library steps" since I was creating my first js library.
Note that you do not need to put your generated file in version control. You can use npm files property in package.json to package your bundled files while ignoring them in git.