1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00

Handle dependencies that should be split from the main app

Using ES6’s System.import allows webpack to split up the dependency
into its own chunk and load it as necessary. When this is not possible
(ie. when a script expects itself to be dropped into the html), follow
the previous strategy of copying the dependency folder into the build
folder.
This commit is contained in:
Brett Sun 2016-06-02 15:35:31 +02:00
parent 7eaa3b1a2b
commit 2921c2adac
7 changed files with 90 additions and 23 deletions

View File

@ -7,10 +7,15 @@ import Panel from 'react-bootstrap/lib/Panel';
import AppConstants from '../../constants/application_constants'; import AppConstants from '../../constants/application_constants';
import audiojs from '../../third_party/imports/audiojs';
import shmui from '../../third_party/imports/shmui';
import videojs from '../../third_party/imports/videojs';
import { escapeHTML } from '../../utils/general_utils'; import { escapeHTML } from '../../utils/general_utils';
import { extractFileExtensionFromUrl } from '../../utils/file_utils'; import { extractFileExtensionFromUrl } from '../../utils/file_utils';
import { InjectInHeadUtils } from '../../utils/inject_utils'; import { InjectInHeadUtils } from '../../utils/inject_utils';
/** /**
* This is the component that implements display-specific functionality. * This is the component that implements display-specific functionality.
* *
@ -57,12 +62,9 @@ let Image = React.createClass({
componentDidMount() { componentDidMount() {
if (this.props.url) { if (this.props.url) {
InjectInHeadUtils.inject(AppConstants.jquery.sdkUrl) shmui
.then(() => .importLib()
Q.all([ .then(() => window.jQuery('.shmui-ascribe').shmui());
InjectInHeadUtils.inject(AppConstants.shmui.cssUrl),
InjectInHeadUtils.inject(AppConstants.shmui.sdkUrl)
]).then(() => { window.jQuery('.shmui-ascribe').shmui(); }));
} }
}, },
@ -89,13 +91,9 @@ let Audio = React.createClass({
}, },
componentDidMount() { componentDidMount() {
InjectInHeadUtils.inject(AppConstants.audiojs.sdkUrl).then(this.ready); audiojs
}, .importLib()
.then(() => window.audiojs.events.ready(() => window.audiojs.createAll()));
ready() {
window.audiojs.events.ready(function() {
window.audiojs.createAll();
});
}, },
render() { render() {
@ -142,11 +140,10 @@ let Video = React.createClass({
}, },
componentDidMount() { componentDidMount() {
Q.all([ videojs
InjectInHeadUtils.inject(AppConstants.videojs.cssUrl), .importLib()
InjectInHeadUtils.inject(AppConstants.videojs.sdkUrl)]) .then(() => this.setState({ libraryLoaded: true }))
.then(() => this.setState({libraryLoaded: true})) .catch(() => this.setState({ libraryLoaded: false }));
.fail(() => this.setState({libraryLoaded: false}));
}, },
shouldComponentUpdate(nextProps, nextState) { shouldComponentUpdate(nextProps, nextState) {

View File

@ -98,12 +98,8 @@ const constants = {
'jquery': { 'jquery': {
'sdkUrl': 'https://code.jquery.com/jquery-2.1.4.min.js' 'sdkUrl': 'https://code.jquery.com/jquery-2.1.4.min.js'
}, },
'shmui': {
'sdkUrl': baseUrl + 'static/thirdparty/shmui/jquery.shmui.js',
'cssUrl': baseUrl + 'static/thirdparty/shmui/shmui.css'
},
'audiojs': { 'audiojs': {
'sdkUrl': baseUrl + 'static/thirdparty/audiojs/audiojs/audio.min.js' 'sdkUrl': baseUrl + '/static/third_party/audiojs/audio.min.js'
}, },
'videojs': { 'videojs': {
'sdkUrl': '//vjs.zencdn.net/4.12/video.js', 'sdkUrl': '//vjs.zencdn.net/4.12/video.js',

18
js/third_party/imports/audiojs.js vendored Normal file
View File

@ -0,0 +1,18 @@
import AppConstants from '../../constants/application_constants';
import { InjectInHeadUtils } from '../../utils/inject_utils';
/**
* Imports audiojs from the copied directory.
*
* Unfortunately, audiojs' package structure and the way it currently loads image assets prevents us
* from using System.import.
*
* @return {Promise} Promise that resolves with [audio.min.js] on success.
*/
function importLib() {
return InjectInHeadUtils.inject(AppConstants.audiojs.sdkUrl);
}
export default { importLib };

19
js/third_party/imports/shmui.js vendored Normal file
View File

@ -0,0 +1,19 @@
import AppConstants from '../../constants/application_constants';
import { InjectInHeadUtils } from '../../utils/inject_utils';
/**
* Imports shmui and its dependencies (jQuery)
*
* @return {Promise} Promise that resolves with [jquery.shmui.js, shmui.css] on success.
*/
function importLib() {
return InjectInHeadUtils.inject(AppConstants.jquery.sdkUrl)
.then(() => Promise.all([
System.import('shmui/jquery.shmui.js'),
System.import('shmui/shmui.css')
]))
}
export default { importLib };

18
js/third_party/imports/videojs.js vendored Normal file
View File

@ -0,0 +1,18 @@
import AppConstants from '../../constants/application_constants';
import { InjectInHeadUtils } from '../../utils/inject_utils';
/**
* Imports videojs and its stylesheet.
*
* @return {Promise} Promise that resolves with [video.js, video-js.css] on success.
*/
function importLib() {
return Promise.all([
InjectInHeadUtils.inject(AppConstants.videojs.cssUrl),
InjectInHeadUtils.inject(AppConstants.videojs.sdkUrl)
]);
}
export default { importLib };

View File

@ -73,6 +73,7 @@
"classlist-polyfill": "^1.0.2", "classlist-polyfill": "^1.0.2",
"classnames": "^1.2.2", "classnames": "^1.2.2",
"compression": "^1.6.2", "compression": "^1.6.2",
"copy-webpack-plugin": "^3.0.1",
"core-js": "^2.4.0", "core-js": "^2.4.0",
"css-loader": "^0.23.1", "css-loader": "^0.23.1",
"decamelize": "^1.1.1", "decamelize": "^1.1.1",

View File

@ -8,6 +8,7 @@ const removeTrailingSlash = require('remove-trailing-slash');
const webpack = require('webpack'); const webpack = require('webpack');
const autoPrefixer = require('autoprefixer'); const autoPrefixer = require('autoprefixer');
const combineLoaders = require('webpack-combine-loaders'); const combineLoaders = require('webpack-combine-loaders');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
@ -51,6 +52,15 @@ const DEFINITIONS = {
const PLUGINS = [ const PLUGINS = [
new webpack.DefinePlugin(DEFINITIONS), new webpack.DefinePlugin(DEFINITIONS),
new webpack.NoErrorsPlugin(), new webpack.NoErrorsPlugin(),
// Handle any dependencies that don't play nicely with System.import resolution
new CopyWebpackPlugin([
{
from: path.resolve(PATHS.NODE_MODULES, 'audiojs/audiojs'),
to: 'third_party/audiojs'
},
]),
// Extract stylesheets out of bundle // Extract stylesheets out of bundle
new ExtractTextPlugin( new ExtractTextPlugin(
PRODUCTION ? 'css/styles.min.css' : 'css/styles.css', { PRODUCTION ? 'css/styles.min.css' : 'css/styles.css', {
@ -153,6 +163,14 @@ const LOADERS = [
loader: ExtractTextPlugin.extract('style', SASS_LOADER), loader: ExtractTextPlugin.extract('style', SASS_LOADER),
}, },
// Dependencies
// Shmui
{
test: /\.css$/,
include: [path.resolve(PATHS.NODE_MODULES, 'shmui')],
loader: `style!${CSS_LOADER}`,
},
// Fonts // Fonts
// woffs and svgs are typically smaller should we can try to load them as a url // woffs and svgs are typically smaller should we can try to load them as a url
{ {