Common JS Workflows

common-js-workflows.md

COMMON JS WORKFLOWS

Use an ES6 Module

With Unpkg

Add type="module" to script tags:

<script type="module">
  //then make sure to use the param module in unpkg:
  import _ from 'https://unpkg.com/lodash-es?module'
  //or...
  import cloneDeep from 'https://unpkg.com/lodash-es/cloneDeep?module'
</script>

with browser-sync

Import with module param:

import { html, LitElement } from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';

and then use browser-sync:

browser-sync src -f src --cors --no-notify

with webpack

Install webpack and all its garbage: npm install --save-dev webpack webpack-cli copy-webpack-plugin webpack-dev-server

Create a really confusing webpack config (webpack.config.js):

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new CopyPlugin([
            { from: 'src/index.html', to: './' },
            { from: 'src/style.css', to: './' },
        ]),
    ],
};

Init npm in your project (npm init) and add this script:

"dev": "webpack-dev-server --open"

Import as normal, no params:

import { html, LitElement } from 'lit-element/lit-element.js';

Run the dev-server with live-reload with npm run dev.

With Pika:

npm install && npx @pika/web import { html, LitElement } from './web_modules/lit-element.js';

Utilize CommonJS (require) npm modules in the browser:

in terminal:

npm install browserify -g
npm install watchify -g
npm init
npm install glslCanvas --save

in html:

<script src="bundle.js"></script>

in main.js: const GlslCanvas = require('GlslCanvas');

back in terminal: watchify main.js -o bundle.js