twreporter-react
Version:
React-Redux site for The Reporter Foundation in Taiwan
716 lines (609 loc) • 20.2 kB
JavaScript
import path from 'path'
import fs from 'fs'
import require_hacker from 'require-hacker'
import Log from './tools/log'
import UglifyJS from 'uglify-js'
import { exists, clone, convert_from_camel_case, starts_with, ends_with, alias_properties_with_camel_case } from './helpers'
import { default_webpack_assets, normalize_options, alias_hook, normalize_asset_path, uniform_path } from './common'
// using ES6 template strings
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings
export default class webpack_isomorphic_tools
{
// require() hooks for assets
hooks = []
// used to keep track of cached assets and flush their caches on .refresh() call
cached_assets = []
constructor(options)
{
// take the passed in options
this.options = convert_from_camel_case(clone(options))
// add missing fields, etc
normalize_options(this.options)
// set require-hacker debug mode if run in debug mode
if (this.options.debug)
{
require_hacker.log.options.debug = true
}
// logging
this.log = new Log('webpack-isomorphic-tools', { debug: this.options.debug })
this.log.debug(`instantiated webpack-isomorphic-tools v${require('../package.json').version} with options`, this.options)
}
// sets development mode flag to whatever was passed (or true if nothing was passed)
// (development mode allows asset hot reloading when used with webpack-dev-server)
development(flag)
{
// set development mode flag
this.options.development = exists(flag) ? flag : true
if (this.options.development)
{
this.log.debug('entering development mode')
}
else
{
this.log.debug('entering production mode')
}
// allows method chaining
return this
}
// returns a mapping to read file paths for all the user specified asset types
// along with a couple of predefined ones: javascripts and styles
assets()
{
// when in development mode
if (this.options.development)
{
// webpack and node.js start in parallel
// so webpack-assets.json might not exist on the very first run
// if a developer chose not to use the .server() method with a callback
// (or if a developer chose not to wait for a Promise returned by the .server() method)
if (!fs.existsSync(this.webpack_assets_path))
{
this.log.error(`"${this.webpack_assets_path}" not found. Most likely it hasn't yet been generated by Webpack. The most probable cause of this error is that you placed your server code outside of the callback in "webpack_isomorphic_tools.server(path, callback)" (or outside of the ".then()" call if you are using promises API). Using an empty stub instead.`)
return default_webpack_assets()
}
}
return require(this.webpack_assets_path)
}
// clear the require.cache (only used in developer mode with webpack-dev-server)
refresh()
{
// ensure this is development mode
if (!this.options.development)
{
throw new Error('.refresh() called in production mode. Did you forget to call .development() method on your webpack-isomorphic-tools server instance?')
}
this.log.debug('flushing require() caches')
// uncache webpack-assets.json file
// this.log.debug(' flushing require() cache for webpack assets json file')
// this.log.debug(` (was cached: ${typeof(require.cache[this.webpack_assets_path]) !== 'undefined'})`)
delete require.cache[this.webpack_assets_path]
// uncache cached assets
for (let path of this.cached_assets)
{
this.log.debug(` flushing require() cache for ${path}`)
delete require.cache[path]
}
// no assets are cached now
this.cached_assets = []
}
// Makes `webpack-isomorphic-tools` aware of Webpack aliasing feature.
// https://webpack.github.io/docs/resolving.html#aliasing
// The `aliases` parameter corresponds to `resolve.alias`
// in your Webpack configuration.
// If this method is used it must be called before the `.server()` method.
enable_aliasing()
{
// mount require() hook
this.alias_hook = require_hacker.resolver((path, module) =>
{
// returns aliased global filesystem path
return alias_hook(path, module, this.options.project_path, this.options.alias, this.log)
})
// allows method chaining
return this
}
// Initializes server-side instance of `webpack-isomorphic-tools`
// with the base path for your project, then calls `.register()`,
// and after that calls .wait_for_assets(callback).
//
// The `project_path` parameter must be identical
// to the `context` parameter of your Webpack configuration
// and is needed to locate `webpack-assets.json`
// which is output by Webpack process.
//
// sets up "project_path" option
// (this option is required on the server to locate webpack-assets.json)
server(project_path, callback)
{
// project base path, required to locate webpack-assets.json
this.options.project_path = project_path
// resolve webpack-assets.json file path
this.webpack_assets_path = path.resolve(this.options.project_path, this.options.webpack_assets_file_path)
// register require() hooks
this.register()
// if Webpack aliases are supplied, enable aliasing
if (this.options.alias)
{
this.enable_aliasing()
}
// if Webpack `modulesDirectories` are supplied, enable them
if (this.options.modules_directories)
{
this.inject_modules_directories(this.options.modules_directories)
}
// inject helpers like require.context() and require.ensure()
if (this.options.patch_require)
{
this.log.debug('Patching Node.js require() function')
this.patch_require()
}
// when ready:
// if callback is given, call it back
if (callback)
{
// call back when ready
return this.wait_for_assets(callback)
}
// otherwise resolve a Promise
else
{
// no callback given, return a Promise
return new Promise((resolve, reject) => this.wait_for_assets(resolve))
}
}
// Registers Node.js require() hooks for the assets
//
// This is what makes the `requre()` magic work on server.
// These `require()` hooks must be set before you `require()`
// any of your assets
// (e.g. before you `require()` any React components
// `require()`ing your assets).
//
// read this article if you don't know what a "require hook" is
// http://bahmutov.calepin.co/hooking-into-node-loader-for-fun-and-profit.html
register()
{
this.log.debug('registering require() hooks for assets')
// // a helper array for extension matching
// const extensions = []
//
// // for each user specified asset type,
// // for each file extension,
// // create an entry in the extension matching array
// for (let asset_type of Object.keys(this.options.assets))
// {
// const description = this.options.assets[asset_type]
//
// for (let extension of description.extensions)
// {
// extensions.push([`.${extension}`, description])
// }
// }
//
// // registers a global require() hook which runs
// // before the default Node.js require() logic
// this.asset_hook = require_hacker.global_hook('webpack-asset', (path, module) =>
// {
// // for each asset file extension
// for (let extension of extensions)
// {
// // if the require()d path has this file extension
// if (ends_with(path, extension[0]))
// {
// // then require() it using webpack-assets.json
// return this.require(require_hacker.resolve(path, module), extension[1])
// }
// }
// })
// for each user specified asset type,
// register a require() hook for each file extension of this asset type
for (let asset_type of Object.keys(this.options.assets))
{
const description = this.options.assets[asset_type]
for (let extension of description.extensions)
{
this.register_extension(extension, description)
}
}
// allows method chaining
return this
}
// registers a require hook for a particular file extension
register_extension(extension, description)
{
this.log.debug(` registering a require() hook for *.${extension}`)
// place the require() hook for this extension
if (extension === 'json')
{
this.hooks.push(require_hacker.hook(extension, path =>
{
// special case for require('webpack-assets.json') and 'json' asset extension
if (path === this.webpack_assets_path)
{
return
}
return this.require(path, description)
}))
}
else
{
this.hooks.push(require_hacker.hook(extension, path => this.require(path, description)))
}
}
// injects Webpack's `modulesDirectories` into Node.js module resolver
inject_modules_directories(modules_directories)
{
modules_directories = modules_directories.filter(x => x !== 'node_modules')
// instrument Module._nodeModulePaths function
// https://github.com/nodejs/node/blob/master/lib/module.js#L202
//
const original_find_paths = require('module')._findPath
//
require('module')._findPath = function(request, paths)
{
paths.map(function(a_path)
{
var parts = a_path.split(path.sep)
if (parts[parts.length - 1] === 'node_modules')
{
parts[parts.length - 1] = ''
return parts.join(path.sep)
}
})
.filter(function(a_path)
{
return a_path
})
.forEach(function(a_path)
{
modules_directories.forEach(function(modules_directory)
{
paths.push(a_path + modules_directory)
})
})
return original_find_paths(request, paths)
}
}
// injects helper functions into `require()` function
// (such as `.context()` and `.ensure()`)
// https://github.com/halt-hammerzeit/webpack-isomorphic-tools/issues/48#issuecomment-182878437
// (this is a "dirty" way to do it but it works)
patch_require()
{
// a source code of a function that
// require()s all modules inside the `base` folder
// and puts them into a hash map for further reference
//
// https://webpack.github.io/docs/context.html
//
let require_context = `require.context = function(base, scan_subdirectories, regular_expression)
{
base = require('path').join(require('path').dirname(module.filename), base)
var contents = {}
// recursive function
function read_directory(directory)
{
require('fs').readdirSync(directory).forEach(function(child)
{
var full_path = require('path').resolve(directory, child)
if (require('fs').statSync(full_path).isDirectory())
{
if (scan_subdirectories)
{
read_directory(full_path)
}
}
else
{
var asset_path = require('path').relative(base, full_path)
// analogous to "uniform_path" from "./common.js"
asset_path = (asset_path[0] === '.' ? asset_path : ('./' + asset_path)).replace(/\\\\/g, '/')
if (regular_expression && !regular_expression.test(asset_path))
{
return
}
contents[asset_path] = full_path
}
})
}
read_directory(base)
var result = function(asset_path)
{
return require(contents[asset_path])
}
result.keys = function()
{
return Object.keys(contents)
}
result.resolve = function(asset_path)
{
return contents[asset_path]
}
return result
};`
// some code minification
require_context = UglifyJS.minify(require_context, { fromString: true }).code
// Source code for `require.ensure()`
// https://github.com/halt-hammerzeit/webpack-isomorphic-tools/issues/84
const require_ensure = `require.ensure=function(d,c){c(require)};`
const debug = this.log.debug.bind(this.log)
// instrument Module.prototype._compile function
// https://github.com/nodejs/node/blob/master/lib/module.js#L376-L380
//
const original_compile = require('module').prototype._compile
//
require('module').prototype._compile = function(content, filename)
{
// inject it only in .js files
if (!ends_with(filename, '.js'))
{
// (the return value is supposed to be `undefined`)
return original_compile.call(this, content, filename)
}
// will be prepended to the module source code
let preamble = ''
// inject it only in .js files which
// might probably have `require.context` reference
if (content.indexOf('require.context') >= 0)
{
debug(`Injecting require.context() into "${filename}"`)
preamble += require_context
}
// inject it only in .js files which
// might probably have `require.ensure` reference
if (content.indexOf('require.ensure') >= 0)
{
debug(`Injecting require.ensure() into "${filename}"`)
preamble += require_ensure
}
// If there is a preamble to prepend
if (preamble)
{
// Account for "use strict" which is required to be in the beginning of the source code
if (starts_with(content, `'use strict'`) || starts_with(content, `"use strict"`))
{
preamble = `"use strict";` + preamble
}
}
// the "dirty" way
content = preamble + content
// (the return value is supposed to be `undefined`)
return original_compile.call(this, content, filename)
}
}
// require()s an asset by a path
require(global_asset_path, description)
{
this.log.debug(`require() called for ${global_asset_path}`)
// sanity check
/* istanbul ignore if */
if (!this.options.project_path)
{
throw new Error(`You forgot to call the .server() method passing it your project's base path`)
}
// convert global asset path to local-to-the-project asset path
const asset_path = normalize_asset_path(global_asset_path, this.options.project_path)
// if this filename is in the user specified exceptions list
// (or is not in the user explicitly specified inclusion list)
// then fall back to the normal require() behaviour
if (!this.includes(asset_path, description) || this.excludes(asset_path, description))
{
this.log.debug(` skipping require call for ${asset_path}`)
return
}
// track cached assets (only in development mode)
if (this.options.development)
{
// mark this asset as cached
this.cached_assets.push(global_asset_path)
}
// return CommonJS module source for this asset
return require_hacker.to_javascript_module_source(this.asset_source(asset_path))
}
// returns asset source by path (looks it up in webpack-assets.json)
asset_source(asset_path)
{
this.log.debug(` requiring ${asset_path}`)
// Webpack replaces `node_modules` with `~`.
// I don't know how exactly it decides whether to
// replace `node_modules` with `~` or not
// so it will be a guess.
function possible_webpack_paths(asset_path)
{
// Webpack always replaces project's own `node_modules` with `~`
if (starts_with(asset_path, './node_modules/'))
{
asset_path = asset_path.replace('./node_modules/', './~/')
}
// if there are any `node_modules` left,
// supposing the count is N,
// then there are 2 to the power of N possible guesses
// on how webpack path might look like.
const parts = asset_path.split('/node_modules/')
function construct_guesses(parts)
{
if (parts.length === 1)
{
return [parts]
}
const last = parts.pop()
const rest = construct_guesses(parts)
const guesses = []
for (let guess of rest)
{
const one = clone(guess)
one.push('/~/')
one.push(last)
const two = clone(guess)
two.push('/node_modules/')
two.push(last)
guesses.push(one)
guesses.push(two)
}
return guesses
}
return construct_guesses(parts)
}
// get real file path list
const assets = this.assets().assets
const possible_webpack_asset_paths = possible_webpack_paths(asset_path).map(path => path.join(''))
for (let webpack_asset_path of possible_webpack_asset_paths)
{
if (possible_webpack_asset_paths.length > 1)
{
this.log.debug(` trying "${webpack_asset_path}"`)
}
// find this asset in the real file path list
const asset = assets[webpack_asset_path]
if (exists(asset))
{
// the asset was found in the list - return it
return asset
}
}
// if the asset was not found in the list,
// return nothing and output an error
this.log.error(`asset not found: ${asset_path}`)
return
}
// unregisters require() hooks
undo()
{
// for each user specified asset type,
// unregister a require() hook for each file extension of this asset type
for (let hook of this.hooks)
{
hook.unmount()
}
// this.asset_hook.unmount()
// unmount the aliasing hook (if mounted)
if (this.alias_hook)
{
this.alias_hook.unmount()
}
}
// Checks if the required path should be excluded from the custom require() hook
excludes(path, options)
{
// if "exclude" parameter isn't specified, then exclude nothing
if (!exists(options.exclude))
{
return false
}
// for each exclusion case
for (let exclude of options.exclude)
{
// supports regular expressions
if (exclude instanceof RegExp)
{
if (exclude.test(path))
{
return true
}
}
// check for a compex logic match
else if (typeof exclude === 'function')
{
if (exclude(path))
{
return true
}
}
// otherwise check for a simple textual match
else
{
if (exclude === path)
{
return true
}
}
}
// no matches found.
// returns false so that it isn't undefined (for testing purpose)
return false
}
// Checks if the required path should be included in the custom require() hook
includes(path, options)
{
// if "include" parameter isn't specified, then include everything
if (!exists(options.include))
{
return true
}
// for each inclusion case
for (let include of options.include)
{
// supports regular expressions
if (include instanceof RegExp)
{
if (include.test(path))
{
return true
}
}
// check for a compex logic match
else if (typeof include === 'function')
{
if (include(path))
{
return true
}
}
// otherwise check for a simple textual match
else
{
if (include === path)
{
return true
}
}
}
// no matches found.
// returns false so that it isn't undefined (for testing purpose)
return false
}
// Waits for webpack-assets.json to be created after Webpack build process finishes
//
// The callback is called when `webpack-assets.json` has been found
// (it's needed for development because `webpack-dev-server`
// and your application server are usually run in parallel).
//
wait_for_assets(done)
{
// condition check interval
const check_interval = 300 // in milliseconds
const message_interval = 2000 // in milliseconds
// show the message not too often
let message_timer = 0
// selfie
const tools = this
// waits for condition to be met, then proceeds
function wait_for(condition, proceed)
{
function check()
{
// if the condition is met, then proceed
if (condition())
{
return proceed()
}
message_timer += check_interval
if (message_timer >= message_interval)
{
message_timer = 0
tools.log.debug(`(${tools.webpack_assets_path} not found)`)
tools.log.info('(waiting for the first Webpack build to finish)')
}
setTimeout(check, check_interval)
}
check()
}
// wait for webpack-assets.json to be written to disk by Webpack
// (setTimeout() for global.webpack_isomorphic_tools )
setImmediate(() => wait_for(() => fs.existsSync(this.webpack_assets_path), done))
// allows method chaining
return this
}
}
// alias camel case for those who prefer it
alias_properties_with_camel_case(webpack_isomorphic_tools.prototype)