Provide playground dependencies with webpack

This confines all the files the playground needs to the playground directory.
This commit is contained in:
Ray Schamp 2016-09-24 18:11:01 -04:00
parent 2d736f2b87
commit a99f9ad5ff
4 changed files with 103 additions and 46 deletions

View file

@ -15,20 +15,22 @@
"start": "webpack-dev-server --host 0.0.0.0 --content-base .",
"test": "make test"
},
"dependencies": {
"dependencies": {},
"devDependencies": {
"copy-webpack-plugin": "3.0.1",
"eslint": "2.7.0",
"expose-loader": "0.7.1",
"highlightjs": "8.7.0",
"htmlparser2": "3.9.0",
"json-loader": "0.5.4",
"lodash.defaultsdeep": "4.6.0",
"promise": "7.1.1",
"webpack": "1.13.0"
},
"devDependencies": {
"eslint": "2.7.0",
"highlightjs": "8.7.0",
"scratch-blocks": "git+https://git@github.com/LLK/scratch-blocks.git#develop",
"scratch-render": "git+https://git@github.com/LLK/scratch-render.git#develop",
"scratch-blocks": "0.1.0-80849",
"scratch-render": "0.1.0-9f26a",
"script-loader": "0.7.0",
"stats.js": "0.16.0",
"tap": "5.7.1",
"webpack": "1.13.0",
"webpack-dev-server": "1.14.1"
}
}

View file

@ -5,7 +5,7 @@
<meta charset="utf-8">
<title>Scratch VM Playground</title>
<link rel="stylesheet" href="playground.css">
<link rel="stylesheet" href="../node_modules/highlightjs/styles/zenburn.css">
<link rel="stylesheet" href="zenburn.css">
</head>
<body>
<div id="vm-devtools">
@ -763,20 +763,10 @@
</category>
<category name="More Blocks" colour="#FF6680" custom="PROCEDURE"></category>
</xml>
<!-- FPS counter -->
<script src="../node_modules/stats.js/build/stats.min.js"></script>
<!-- Syntax highlighter -->
<script src="../node_modules/highlightjs/highlight.pack.min.js"></script>
<!-- Scratch Blocks -->
<!-- For easier development between the two, use `npm link` -->
<script src="../node_modules/scratch-blocks/blockly_compressed_vertical.js"></script>
<script src="../node_modules/scratch-blocks/blocks_compressed.js"></script>
<script src="../node_modules/scratch-blocks/blocks_compressed_vertical.js"></script>
<script src="../node_modules/scratch-blocks/msg/messages.js"></script>
<!-- Renderer -->
<script src="../node_modules/scratch-render/render.js"></script>
<!-- FPS counter, Syntax highlighter, Blocks, Renderer -->
<script src="./vendor.js"></script>
<!-- VM Worker -->
<script src="../vm.js"></script>
<script src="./vm.js"></script>
<!-- Playground -->
<script src="./playground.js"></script>
<script>

View file

@ -47,7 +47,7 @@ window.onload = function() {
var toolbox = document.getElementById('toolbox');
var workspace = window.Blockly.inject('blocks', {
toolbox: toolbox,
media: '../node_modules/scratch-blocks/media/',
media: './media/',
zoom: {
controls: true,
wheel: true,

View file

@ -1,3 +1,5 @@
var CopyWebpackPlugin = require('copy-webpack-plugin');
var defaultsDeep = require('lodash.defaultsdeep');
var webpack = require('webpack');
var base = {
@ -6,9 +8,6 @@ var base = {
{
test: /\.json$/,
loader: 'json-loader'
}, {
test: require.resolve('./src/index.js'),
loader: 'expose?VirtualMachine'
}
]
},
@ -23,23 +22,89 @@ var base = {
]
};
module.exports = [Object.assign({}, base, {
entry: {
'vm': './src/index.js',
'vm.min': './src/index.js'
},
output: {
path: __dirname,
filename: '[name].js'
}
}), Object.assign({}, base, {
entry: {
'dist': './src/index.js'
},
output: {
library: 'VirtualMachine',
libraryTarget: 'commonjs2',
path: __dirname,
filename: '[name].js'
}
})];
module.exports = [
// Web-compatible, playground
defaultsDeep({}, base, {
entry: {
'vm': './src/index.js',
'vm.min': './src/index.js'
},
output: {
path: __dirname,
filename: '[name].js'
},
module: {
loaders: base.module.loaders.concat([
{
test: require.resolve('./src/index.js'),
loader: 'expose?VirtualMachine'
}
])
}
}),
// Webpack-compatible
defaultsDeep({}, base, {
entry: {
'dist': './src/index.js'
},
output: {
library: 'VirtualMachine',
libraryTarget: 'commonjs2',
path: __dirname,
filename: '[name].js'
}
}),
// Playground
defaultsDeep({}, base, {
entry: {
'playground/vm': './src/index.js',
'playground/vendor': [
// FPS counter
'stats.js/build/stats.min.js',
// Syntax highlighter
'highlightjs/highlight.pack.min.js',
// Scratch Blocks
'scratch-blocks/dist/vertical.js',
// Renderer
'scratch-render'
]
},
output: {
path: __dirname,
filename: '[name].js'
},
module: {
loaders: base.module.loaders.concat([
{
test: require.resolve('./src/index.js'),
loader: 'expose?VirtualMachine'
},
{
test: require.resolve('stats.js/build/stats.min.js'),
loader: 'script'
},
{
test: require.resolve('highlightjs/highlight.pack.min.js'),
loader: 'script'
},
{
test: require.resolve('scratch-blocks/dist/vertical.js'),
loader: 'expose?Blockly'
},
{
test: require.resolve('scratch-render'),
loader: 'expose?RenderWebGL'
}
])
},
plugins: base.plugins.concat([
new CopyWebpackPlugin([{
from: 'node_modules/scratch-blocks/media',
to: 'playground/media'
}, {
from: 'node_modules/highlightjs/styles/zenburn.css',
to: 'playground'
}])
])
})
];