Modular Code - sgml/signature GitHub Wiki

• Turn on all options for verbosity in webpack and babel

• Comment out code that you don't need if it is causing errors

• Use default imports and exports since webpack and babel fail with poor error messaging when a named import is used with sourcemaps:

1. https://github.com/webpack/webpack/issues/4423

2. https://github.com/webpack/webpack/issues/3957

• Use a modular structure like HighCharts or i18next-icu to avoid the need for destructuring exports

• Use jsfiddle, codepen, or plunker to test things such as open source react components. For example:

1. https://codepen.io/oneezy/pen/jzWjLe

2. https://jsfiddle.net/boilerplate/typescript

3. https://codepen.io/HousewifeHacker/pen/zRRqYe

4. https://plnkr.co/edit/R1ECDV?p=info

5. https://codepen.io/simeg/pen/YppLmO

6. https://codepen.io/andytran/pen/jyEPyL

• Then map the imports to script tags as follows:

Use the following code for babel and react without node.js:

<script src="https://unpkg.com/[email protected]/babel.js"></script>
 
<script type="text/babel">
    var contentNode = document.getElementById('content');
    var component = <h1> Hello World </h1>; // A simple JSX component
    ReactDOM.render(component, contentNode); // Render the conponent
</script>

• Use react as a standard preset: presets:["react"]

• Instead of a preset like babel-preset-env, use individual Babel plugins listed in the verbose output such as:

• https://babeljs.io/docs/en/babel-plugin-transform-arrow-functions

• https://babeljs.io/docs/en/babel-plugin-transform-for-of

• https://babeljs.io/docs/en/babel-plugin-transform-destructuring

• https://babeljs.io/docs/en/babel-plugin-transform-shorthand-properties

• https://babeljs.io/docs/en/babel-plugin-transform-function-name

• Use explicit code instead of stage0, stage1, stage2, and stage3 presets for proposed tc39 features such as:

1. decorators
2. class properties
3. export-default-from
4. null coalescing (??)

• Use the copy webpack plugin to move HTML and CSS files rather than the loaders in development mode, use the file-loader to inline images, the style-loader to inline styles, the postCSS plugin to handle CSS imports, and use the extract text plugin to combine the styles with the design language CSS in production mode

• Use styled-components rather than inline styles

• https://github.com/rclone/rclone/issues/2380

• Webpack and npm for Simple Java 8 Web Apps

• Webpack a Spring Boot App With Instant Page Refresh

• How to Develop a WordPress Plugin Using Webpack 3 & React (Part 1)

• Fast Front End Development Cycle with Spring Boot | vorba.ch

• Spring Boot and Vue.js

• The breakpoint linked location is incorrect when debugging vue in chrome