Design patterns help us to make our applications more flexible, perform better, and easier to maintain, giving our workflow a huge boost when it comes to speed without reducing quality.
import babel from 'rollup-plugin-babel' | |
import commonjs from 'rollup-plugin-commonjs' | |
import postcss from 'rollup-plugin-postcss' | |
import resolve from 'rollup-plugin-node-resolve' | |
import pkg from './package.json' | |
export default { | |
input: 'src/index.js', | |
output: [ |
// File log.js | |
const log = () => { | |
console.log('Example of ES module system'); | |
} | |
export default log | |
// File index.js | |
import log from "./log" | |
log(); |
// File log.js | |
define(['logModule'], function(){ | |
// export (expose) foo for other modules | |
return { | |
log: function(){ | |
console.log('Example of AMD module system'); | |
} | |
}; | |
}); |
Seen a few tweets on this. I want to dispel some FUD.
Node is probably going to introduce a new file extension for JavaScript modules, .mjs
. The reasons for this are long and perilous, and trying to summarize the discussion that led to it is maddening. The short version is that ES6 modules have different semantics from existing scripts, and need to be executed differently. In browsers, this is done with <script type="module">
. In Node, this will be done by analyzing the file extension of the imported file.
I'll be honest: I don't love this solution! I was rooting for the TC39 counter-proposal. But I also understand the solution that the Node developers chose, and why they chose it.
The new file extension is a good enough solution. You can read the [draft spec](https://github.com/nodejs/node-eps/
// File log.js | |
function log(){ | |
console.log('Example of CJS module system'); | |
} | |
// expose log to other modules | |
module.exports = { log } | |
// File index.js | |
var logModule = require('./log'); | |
logModule.log(); |
const AWS = require('aws-sdk'); | |
const Busboy = require('busboy'); | |
const BUCKET_NAME = ''; | |
const IAM_USER_KEY = ''; | |
const IAM_USER_SECRET = ''; | |
function uploadToS3(file) { | |
let s3bucket = new AWS.S3({ | |
accessKeyId: IAM_USER_KEY, |
// File shakebake.js | |
const shake = () => console.log('shake'); | |
const bake = () => console.log('bake'); | |
//can be tree shaken as we export as es modules | |
export { shake, bake }; | |
// File index.js | |
import { shake } from './shakebake.js' | |
// only shake is included in the output |
const Link = styled.a` | |
color: ${(props) => props.theme.color.blue}; | |
text-decoration: none; | |
cursor: pointer; | |
&:hover { | |
color: ${(props) => props.theme.color.blueDark}; | |
} | |
&:focus { |