eweader/1902092209-nodemoduleslist.md

## 1902092209-nodemoduleslist.md

      
    Raw
  

              1902092209-nodemoduleslist.md
            
          
    Exploration for a Bundling System

Draw a list of dependencies I am using on the app and all that bundled


Parcel.js to bundle the app

Observations


Found a great sample on https://stackoverflow.com/questions/27464168/how-to-include-scripts-located-inside-the-node-modules-folder

public/modules


Use gulp
Copy each requireed module file from node_modules into public/modules
voila

Bootstrap

pi@ueo:~/x/x-prep-dist-190209 $ ls node_modules/bootstrap/dist/
css  js
js

pi@ueo:~/x/x-prep-dist-190209 $ ls node_modules/bootstrap/dist/js
bootstrap.bundle.js      bootstrap.bundle.min.js.map  bootstrap.min.js
bootstrap.bundle.js.map  bootstrap.js                 bootstrap.min.js.map
bootstrap.bundle.min.js  bootstrap.js.map
css

pi@ueo:~/x/x-prep-dist-190209 $ ls node_modules/bootstrap/dist/css
bootstrap.css               bootstrap.min.css
bootstrap.css.map           bootstrap.min.css.map
bootstrap-grid.css          bootstrap-reboot.css
bootstrap-grid.css.map      bootstrap-reboot.css.map
bootstrap-grid.min.css      bootstrap-reboot.min.css
bootstrap-grid.min.css.map  bootstrap-reboot.min.css.map
jquery

pi@ueo:~/x/x-prep-dist-190209 $ ls node_modules/jquery/dist/
core.js    jquery.min.js   jquery.slim.js      jquery.slim.min.map
jquery.js  jquery.min.map  jquery.slim.min.js
jquery-ui-dist

pi@ueo:~/x/x-prep-dist-190209 $ ls node_modules/jquery-ui-dist/
AUTHORS.txt  jquery-ui.css      jquery-ui.structure.css      LICENSE.txt
external     jquery-ui.js       jquery-ui.structure.min.css  package.json
images       jquery-ui.min.css  jquery-ui.theme.css          README.md
index.html   jquery-ui.min.js   jquery-ui.theme.min.css
vue

pi@ueo:~/x/x-prep-dist-190209 $ ls node_modules/vue/dist/
README.md           vue.esm.browser.min.js     vue.runtime.common.js
vue.common.dev.js   vue.esm.js                 vue.runtime.common.prod.js
vue.common.js       vue.js                     vue.runtime.esm.js
vue.common.prod.js  vue.min.js                 vue.runtime.js
vue.esm.browser.js  vue.runtime.common.dev.js  vue.runtime.min.js

  
## 1902092209-plan.js
//gulp build-css
//gulp build-js
var bjs = "node_modules/bootstrap/dist/js";
var bcss= "node_modules/bootstrap/dist/css";

var jq = "node_modules/jquery/dist";

var jqui  = "node_modules/jquery-ui-dist";

var vue = "node_modules/vue/dist";


//@result All respectives are copied in those folders
/*
./public/js
./public/css
# Accessible thru /js /css
that is it
*/
var destjs = "public/js";
var destcss = "public/css";

## gulpfile.js
var path = require('path'),gulp = require('gulp');
var prod = false;
gulp.task('modules', function() {
    sources = [
      './node_modules/prismjs/prism.js',
      './node_modules/prismjs/themes/prism-dark.css',
    ]
    gulp.src( sources ).pipe(gulp.dest('./public/modules/'));
});

gulp.task('copy-modules', ['modules']);

//@stcgoal --- Add all possible related gulp task and task series that we might need to achieve that public/modules libraries
//@a gulp.task('node-modules-js') //Threat all JS requidre within here
var nodemodulesSourceJS = [
    "node_modules/bootstrap/dist/js/bootstrap" + (prod?".min.js":".js" ) ,
    "node_modules/jquery/dist/jquery" + (prod?".min.js":".js" ) ,
];

## making-vue.js-to-work.html
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>


<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

https://bootstrap-vue.js.org/docs/

## npm_install.sh
yarn add bootstrap-material-design bootstrap jquery jquery-ui-dist vue prism --save

## plan-next-experimentation.md

      
    Raw
  

              plan-next-experimentation.md
            
          
    prism.js


Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.

https://prismjs.com/
	//gulp build-css
	//gulp build-js
	var bjs = "node_modules/bootstrap/dist/js";
	var bcss= "node_modules/bootstrap/dist/css";

	var jq = "node_modules/jquery/dist";

	var jqui = "node_modules/jquery-ui-dist";

	var vue = "node_modules/vue/dist";


	//@result All respectives are copied in those folders
	/*
	./public/js
	./public/css
	# Accessible thru /js /css
	that is it
	*/
	var destjs = "public/js";
	var destcss = "public/css";
	var path = require('path'),gulp = require('gulp');
	var prod = false;
	gulp.task('modules', function() {
	sources = [
	'./node_modules/prismjs/prism.js',
	'./node_modules/prismjs/themes/prism-dark.css',
	]
	gulp.src( sources ).pipe(gulp.dest('./public/modules/'));
	});

	gulp.task('copy-modules', ['modules']);

	//@stcgoal --- Add all possible related gulp task and task series that we might need to achieve that public/modules libraries
	//@a gulp.task('node-modules-js') //Threat all JS requidre within here
	var nodemodulesSourceJS = [
	"node_modules/bootstrap/dist/js/bootstrap" + (prod?".min.js":".js" ) ,
	"node_modules/jquery/dist/jquery" + (prod?".min.js":".js" ) ,
	];
	<!-- Add this to <head> -->
	<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
	<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>




	<!-- Add this after vue.js -->
	<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
	<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

	https://bootstrap-vue.js.org/docs/