mirror of
https://github.com/Smaug123/KaTeX
synced 2025-10-04 18:58:39 +00:00
Use webpack to build files and webpack-dev-server for testing (#1068)
* Create a separate entry point for webpack
Created a webpack entry point for KaTeX, which imports katex.less. As
flow[1] and jest[2] doesn't support CSS modules natively, a separate
entry point is used and it is not flowtyped.
[1] https://gist.github.com/lambdahands/d19e0da96285b749f0ef
[2] https://facebook.github.io/jest/docs/en/webpack.html
* Use webpack to build files
* Made webpack.config.js export valid webpack configuration
* Use:
browserify -> webpack
babelify -> babel-loader
UglifyJS CLI -> UglifyJsPlugin
Less CLI -> less-loader
cleancss -> cssnano in css-loader
build/fonts -> file-loader
* Inline CSS(Less) using style-loader and export them using
ExtractTextPlugin
* Add `watch` npm script calling `webpack --watch`
* Improve local testing(webpack-dev-server)
* Made webpackDevServer export a valid webpack configuration
* Compile Less and inline CSS using less-loader and style-loader
* Instead of copying files serve files from /static and use file-loader
* Remove old server.js and its dependencies
* Use webpack-dev-server in Screenshotter
* Include contrib in webpack-dev-server
+ Moved common configurations to webpack.common.js
* Rename webpackDevServer.js to webpack.dev...
to be consistent, avoid confusion with webpack-dev-server and follow
webpack configuration naming convention.
* Remove unnecessary conditional output.path
* Use map instead of reduce
+ Add comments regarding function arguments
* Remove unnecessary mkdir and clean build/* before build
* Use katex as external dependency instead of global variable in contrib
Fixes #692.
* Unblock codes as they are built as a module
* Update package-lock.json
* Add comments regarding devServer option
* Lint renamed webpack.dev.js
a0d8b33
* Export ES6 module and expose its default export
* Revert "Browserify hotfix (#1057)"
This reverts commit f6b509123b.
* Enables colors on the console when running the dev server in Screenshotter
* Add context to webpack configuration
Allows webpack to be run from other directories
* Move `rm -rf build/*` to npm scripts
* Check dependencies before build
* Move UglifyJsPlugin into config creation
* Let webpack handle ES6 modules
Do not transform modules to commonjs in Babel. However Jest doesn't not
support ES6 modules, so transfrom modules to commonjs when NODE_ENV is
`test`.
* Add documentation on testing in IE 9 and 10 using webpack-dev-server
Changed version range to include IE-compatible version
This commit is contained in:
ylemkimon
committed by
Kevin Barabash
Kevin Barabash
parent
4a11c3166d
commit
5f32b71c85
16
.babelrc
16
.babelrc
@@ -1,7 +1,19 @@
|
||||
{
|
||||
"presets": ["es2015", "flow"],
|
||||
"presets": [
|
||||
["es2015", {
|
||||
"modules": false
|
||||
}],
|
||||
"flow"
|
||||
],
|
||||
"plugins": [
|
||||
"transform-runtime",
|
||||
"transform-class-properties"
|
||||
]
|
||||
],
|
||||
"env": {
|
||||
"test": {
|
||||
"plugins": [
|
||||
"transform-es2015-modules-commonjs"
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,13 +57,19 @@ single file. The goal is to have all functions use this new system.
|
||||
|
||||
## Testing
|
||||
|
||||
Local testing can be done by running the node server in `server.js`. Run
|
||||
`npm install` to install dependencies, and then `npm start` to start the server.
|
||||
Local testing can be done by running the webpack-dev-server using configuration
|
||||
`webpack.dev.js`. Run `npm install` to install dependencies, and then `npm start`
|
||||
to start the server.
|
||||
|
||||
This will host an interactive editor at
|
||||
[http://localhost:7936/](http://localhost:7936/) to play around with and test
|
||||
changes.
|
||||
|
||||
webpack-dev-server 2.8.0 introduced a change which included ES6 keywords `const`
|
||||
and `let` within the scripts being served to the browser, and therefore doesn't
|
||||
support IE 9 and 10. If you want to test in IE 9 and 10, install version 2.7.1
|
||||
by running `npm install webpack-dev-server@2.7.1`.
|
||||
|
||||
#### Jest tests
|
||||
|
||||
The JavaScript parser and some of the HTML and MathML tree
|
||||
|
||||
51
Makefile
51
Makefile
@@ -1,5 +1,5 @@
|
||||
.PHONY: build dist lint setup copy serve clean metrics test coverage zip contrib flow
|
||||
build: test build/katex.min.js build/katex.min.css contrib zip compress
|
||||
.PHONY: build dist lint setup webpack serve clean metrics test coverage zip flow
|
||||
build: test build/katex zip compress
|
||||
|
||||
ifeq ($(KATEX_DIST),skip)
|
||||
|
||||
@@ -20,15 +20,6 @@ ifneq ($(NODECHK),OK)
|
||||
$(error "Node not found or wrong version")
|
||||
endif
|
||||
|
||||
# Export these variables for use in contrib Makefiles
|
||||
export BUILDDIR = $(realpath build)
|
||||
export BROWSERIFY = $(realpath ./node_modules/.bin/browserify)
|
||||
export UGLIFYJS = $(realpath ./node_modules/.bin/uglifyjs) \
|
||||
--mangle \
|
||||
--beautify \
|
||||
ascii_only=true,beautify=false
|
||||
export CLEANCSS = $(realpath ./node_modules/.bin/cleancss)
|
||||
|
||||
# The prepublish script in package.json will override the following variable,
|
||||
# setting it to the empty string and thereby avoiding an infinite recursion
|
||||
NIS = .npm-install.stamp
|
||||
@@ -40,29 +31,11 @@ $(NIS) setup: package.json
|
||||
lint: $(NIS)
|
||||
$(NPM) run lint
|
||||
|
||||
build/katex.js: katex.js $(wildcard src/*.js) $(NIS)
|
||||
mkdir -p build
|
||||
$(BROWSERIFY) -t [ babelify ] $< --standalone katex > $@
|
||||
webpack: katex.js $(wildcard src/*.js) $(wildcard static/*.less) $(NIS)
|
||||
$(NPM) run build
|
||||
|
||||
build/katex.min.js: build/katex.js
|
||||
mkdir -p build
|
||||
$(UGLIFYJS) < $< > $@
|
||||
|
||||
build/katex.css: static/katex.less $(wildcard static/*.less) $(NIS)
|
||||
mkdir -p build
|
||||
./node_modules/.bin/lessc $< $@
|
||||
|
||||
build/katex.min.css: build/katex.css
|
||||
mkdir -p build
|
||||
$(CLEANCSS) -o $@ $<
|
||||
|
||||
.PHONY: build/fonts
|
||||
build/fonts:
|
||||
rm -rf $@
|
||||
mkdir $@
|
||||
for font in $(shell grep "font" static/katex.less | grep -o "KaTeX_\w\+" | cut -d" " -f 2 | sort | uniq); do \
|
||||
cp submodules/katex-fonts/fonts/$$font* $@; \
|
||||
done
|
||||
.PHONY: build/fonts build/contrib
|
||||
build/katex.js build/katex.min.js build/katex.css build/katex.min.css build/katex.css build/fonts build/contrib: webpack
|
||||
|
||||
test/screenshotter/unicode-fonts:
|
||||
git clone https://github.com/Khan/KaTeX-test-fonts test/screenshotter/unicode-fonts
|
||||
@@ -70,18 +43,6 @@ test/screenshotter/unicode-fonts:
|
||||
git checkout 99fa66a2da643218754c8236b9f9151cac71ba7c && \
|
||||
cd ../../../
|
||||
|
||||
contrib: build/contrib
|
||||
|
||||
.PHONY: build/contrib
|
||||
build/contrib:
|
||||
mkdir -p build/contrib
|
||||
@# Since everything in build/contrib is put in the built files, make sure
|
||||
@# there's nothing in there we don't want.
|
||||
rm -rf build/contrib/*
|
||||
$(MAKE) -C contrib/auto-render
|
||||
$(MAKE) -C contrib/copy-tex
|
||||
$(MAKE) -C contrib/mathtex-script-type
|
||||
|
||||
.PHONY: build/katex
|
||||
build/katex: build/katex.js build/katex.min.js build/katex.css build/katex.min.css build/fonts README.md build/contrib
|
||||
mkdir -p build/katex
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
.PHONY: build
|
||||
|
||||
build: $(BUILDDIR)/contrib/auto-render.min.js
|
||||
|
||||
$(BUILDDIR)/contrib/auto-render.min.js: $(BUILDDIR)/contrib/auto-render.js
|
||||
$(UGLIFYJS) < $< > $@
|
||||
|
||||
$(BUILDDIR)/contrib/auto-render.js: auto-render.js
|
||||
$(BROWSERIFY) -t [ babelify ] $< --standalone renderMathInElement > $@
|
||||
@@ -29,9 +29,9 @@ before the close body tag:
|
||||
```
|
||||
|
||||
See [index.html](index.html) for an example.
|
||||
(To run this example from a clone of the repository, run `make serve`
|
||||
(To run this example from a clone of the repository, run `npm start`
|
||||
in the root KaTeX directory, and then visit
|
||||
http://0.0.0.0:7936/contrib/auto-render/index.html
|
||||
http://localhost:7936/contrib/auto-render/index.html
|
||||
with your web browser.)
|
||||
|
||||
If you prefer to have all your setup inside the html `<head>`,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* eslint no-console:0 */
|
||||
/* global katex */
|
||||
|
||||
import katex from "katex";
|
||||
import splitAtDelimiters from "./splitAtDelimiters";
|
||||
|
||||
const splitWithDelimiters = function(text, delimiters) {
|
||||
@@ -99,4 +99,4 @@ const renderMathInElement = function(elem, options) {
|
||||
renderElem(elem, optionsCopy);
|
||||
};
|
||||
|
||||
module.exports = renderMathInElement;
|
||||
export default renderMathInElement;
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<!--To run this example from a clone of the repository, run `make serve`
|
||||
<!--To run this example from a clone of the repository, run `npm start`
|
||||
in the root KaTeX directory and then visit with your web browser:
|
||||
http://0.0.0.0:7936/contrib/auto-render/index.html
|
||||
http://localhost:7936/contrib/auto-render/index.html
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Auto-render test</title>
|
||||
<script src="/katex.js" type="text/javascript"></script>
|
||||
<link href="/katex.css" rel="stylesheet" type="text/css">
|
||||
<script src="./auto-render.js" type="text/javascript"></script>
|
||||
<script src="/contrib/auto-render.js" type="text/javascript"></script>
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0px;
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
.PHONY: build
|
||||
|
||||
build: $(BUILDDIR)/contrib/copy-tex.min.js $(BUILDDIR)/contrib/copy-tex.css $(BUILDDIR)/contrib/copy-tex.min.css
|
||||
|
||||
$(BUILDDIR)/contrib/copy-tex.min.js: $(BUILDDIR)/contrib/copy-tex.js
|
||||
$(UGLIFYJS) < $< > $@
|
||||
|
||||
$(BUILDDIR)/contrib/copy-tex.js: copy-tex.js
|
||||
$(BROWSERIFY) -t [ babelify ] $< --standalone renderMathInElement > $@
|
||||
|
||||
$(BUILDDIR)/contrib/copy-tex.css: copy-tex.css
|
||||
cp $< $@
|
||||
|
||||
$(BUILDDIR)/contrib/copy-tex.min.css: $(BUILDDIR)/contrib/copy-tex.css
|
||||
$(CLEANCSS) -o $@ $<
|
||||
@@ -26,9 +26,9 @@ will just get the usual HTML copy/paste behavior.
|
||||
```
|
||||
|
||||
See [index.html](index.html) for an example.
|
||||
(To run this example from a clone of the repository, run `make serve`
|
||||
(To run this example from a clone of the repository, run `npm start`
|
||||
in the root KaTeX directory, and then visit
|
||||
http://0.0.0.0:7936/contrib/copy-tex/index.html
|
||||
http://localhost:7936/contrib/copy-tex/index.html
|
||||
with your web browser.)
|
||||
|
||||
If you want to build your own custom copy handler based on this one,
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import './copy-tex.css';
|
||||
import katexReplaceWithTex from './katex2tex';
|
||||
|
||||
// Global copy handler to modify behavior on .katex elements.
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<!--To run this example from a clone of the repository, run `make serve`
|
||||
<!--To run this example from a clone of the repository, run `npm start`
|
||||
in the root KaTeX directory and then visit with your web browser:
|
||||
http://0.0.0.0:7936/contrib/copy-tex/index.html
|
||||
http://localhost:7936/contrib/copy-tex/index.html
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Copy-tex test</title>
|
||||
<script src="/katex.js" type="text/javascript"></script>
|
||||
<link href="/katex.css" rel="stylesheet" type="text/css">
|
||||
<link href="./copy-tex.css" rel="stylesheet" type="text/css">
|
||||
<script src="../auto-render/auto-render.js" type="text/javascript"></script>
|
||||
<script src="./copy-tex.js" type="text/javascript"></script>
|
||||
<script src="/contrib/auto-render.js" type="text/javascript"></script>
|
||||
<script src="/contrib/copy-tex.js" type="text/javascript"></script>
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0px;
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
.PHONY: build integrity
|
||||
|
||||
build: $(BUILDDIR)/contrib/mathtex-script-type.min.js
|
||||
|
||||
$(BUILDDIR)/contrib/mathtex-script-type.min.js: $(BUILDDIR)/mathtex-script-type.js
|
||||
$(UGLIFYJS) < $< > $@
|
||||
|
||||
$(BUILDDIR)/mathtex-script-type.js: mathtex-script-type.js
|
||||
$(BROWSERIFY) -t [ babelify ] $< > $@
|
||||
@@ -1,24 +1,22 @@
|
||||
/* global katex */
|
||||
import katex from "katex";
|
||||
|
||||
{
|
||||
let scripts = document.body.getElementsByTagName("script");
|
||||
scripts = Array.prototype.slice.call(scripts);
|
||||
scripts.forEach(function(script) {
|
||||
if (!script.type || !script.type.match(/math\/tex/i)) {
|
||||
return -1;
|
||||
}
|
||||
const display =
|
||||
(script.type.match(/mode\s*=\s*display(;|\s|\n|$)/) != null);
|
||||
let scripts = document.body.getElementsByTagName("script");
|
||||
scripts = Array.prototype.slice.call(scripts);
|
||||
scripts.forEach(function(script) {
|
||||
if (!script.type || !script.type.match(/math\/tex/i)) {
|
||||
return -1;
|
||||
}
|
||||
const display =
|
||||
(script.type.match(/mode\s*=\s*display(;|\s|\n|$)/) != null);
|
||||
|
||||
const katexElement = document.createElement(display ? "div" : "span");
|
||||
katexElement.setAttribute("class",
|
||||
display ? "equation" : "inline-equation");
|
||||
try {
|
||||
katex.render(script.text, katexElement, {displayMode: display});
|
||||
} catch (err) {
|
||||
//console.error(err); linter doesn't like this
|
||||
katexElement.textContent = script.text;
|
||||
}
|
||||
script.parentNode.replaceChild(katexElement, script);
|
||||
});
|
||||
}
|
||||
const katexElement = document.createElement(display ? "div" : "span");
|
||||
katexElement.setAttribute("class",
|
||||
display ? "equation" : "inline-equation");
|
||||
try {
|
||||
katex.render(script.text, katexElement, {displayMode: display});
|
||||
} catch (err) {
|
||||
//console.error(err); linter doesn't like this
|
||||
katexElement.textContent = script.text;
|
||||
}
|
||||
script.parentNode.replaceChild(katexElement, script);
|
||||
});
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
|
||||
const childProcess = require("child_process");
|
||||
const fs = require("fs");
|
||||
const http = require("http");
|
||||
const jspngopt = require("jspngopt");
|
||||
const net = require("net");
|
||||
const os = require("os");
|
||||
@@ -12,7 +11,9 @@ const path = require("path");
|
||||
const selenium = require("selenium-webdriver");
|
||||
const firefox = require("selenium-webdriver/firefox");
|
||||
|
||||
const app = require("../../server");
|
||||
const webpack = require('webpack');
|
||||
const webpackDevServer = require("webpack-dev-server");
|
||||
const webpackConfig = require("../../webpack.dev");
|
||||
const data = require("../../test/screenshotter/ss_data");
|
||||
|
||||
const dstDir = path.normalize(
|
||||
@@ -194,7 +195,9 @@ function startServer() {
|
||||
return;
|
||||
}
|
||||
const port = Math.floor(Math.random() * (maxPort - minPort)) + minPort;
|
||||
const server = http.createServer(app).listen(port);
|
||||
const compiler = webpack(webpackConfig);
|
||||
const server = new webpackDevServer(compiler,
|
||||
webpackConfig[0].devServer).listen(port);
|
||||
server.once("listening", function() {
|
||||
devServer = server;
|
||||
katexPort = port;
|
||||
@@ -315,7 +318,7 @@ function findHostIP() {
|
||||
|
||||
// Now we need to find an IP the container can connect to.
|
||||
// First, install a server component to get notified of successful connects
|
||||
app.get("/ss-connect.js", function(req, res, next) {
|
||||
devServer.app.get("/ss-connect.js", function(req, res, next) {
|
||||
if (!katexURL) {
|
||||
katexIP = req.query.ip;
|
||||
katexURL = "http://" + katexIP + ":" + katexPort + "/";
|
||||
|
||||
2
katex.js
2
katex.js
@@ -95,7 +95,7 @@ const renderToHTMLTree = function(
|
||||
return buildHTMLTree(tree, expression, settings);
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
export default {
|
||||
/**
|
||||
* Renders the given LaTeX into an HTML+MathML combination, and adds
|
||||
* it as a child to the specified DOM node.
|
||||
|
||||
11
katex.webpack.js
Normal file
11
katex.webpack.js
Normal file
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* This is the webpack entry point for KaTeX. As flow[1] and jest[2] doesn't support
|
||||
* CSS modules natively, a separate entry point is used and it is not flowtyped.
|
||||
*
|
||||
* [1] https://gist.github.com/lambdahands/d19e0da96285b749f0ef
|
||||
* [2] https://facebook.github.io/jest/docs/en/webpack.html
|
||||
*/
|
||||
import './static/katex.less';
|
||||
import katex from './katex.js';
|
||||
|
||||
export default katex;
|
||||
2514
package-lock.json
generated
2514
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
26
package.json
26
package.json
@@ -3,7 +3,6 @@
|
||||
"version": "0.10.0-pre",
|
||||
"description": "Fast math typesetting for the web.",
|
||||
"main": "dist/katex.js",
|
||||
"browser": "dist/katex.min.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/Khan/KaTeX.git"
|
||||
@@ -25,23 +24,20 @@
|
||||
"babel-preset-es2015": "^6.18.0",
|
||||
"babel-preset-flow": "^6.23.0",
|
||||
"babel-register": "^6.26.0",
|
||||
"babelify": "^7.3.0",
|
||||
"browserify": "^13.3.0",
|
||||
"check-dependencies": "^1.1.0",
|
||||
"clean-css": "^3.4.23",
|
||||
"css-loader": "^0.28.8",
|
||||
"eslint": "^4.14.0",
|
||||
"eslint-plugin-flowtype": "^2.40.1",
|
||||
"express": "^4.14.0",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"file-loader": "^1.1.6",
|
||||
"flow-bin": "^0.62.0",
|
||||
"glob": "^7.1.1",
|
||||
"jest": "^22.0.4",
|
||||
"jest-serializer-html": "^4.0.1",
|
||||
"js-yaml": "^3.3.1",
|
||||
"json-stable-stringify": "^1.0.1",
|
||||
"jspngopt": "^0.2.0",
|
||||
"less": "~2.7.1",
|
||||
"less-plugin-clean-css": "^1.5.1",
|
||||
"morgan": "^1.7.0",
|
||||
"less-loader": "^4.0.5",
|
||||
"nomnom": "^1.8.1",
|
||||
"object-assign": "^4.1.0",
|
||||
"pako": "1.0.4",
|
||||
@@ -49,26 +45,26 @@
|
||||
"rimraf": "^2.6.2",
|
||||
"selenium-webdriver": "^2.48.2",
|
||||
"sri-toolbox": "^0.2.0",
|
||||
"style-loader": "^0.19.1",
|
||||
"stylelint": "^8.4.0",
|
||||
"stylelint-config-standard": "^18.0.0",
|
||||
"uglify-js": "~2.7.5",
|
||||
"uglifyjs-webpack-plugin": "^1.1.6",
|
||||
"webpack": "^3.6.0",
|
||||
"webpack-dev-server": "^2.8.2"
|
||||
"webpack-dev-server": "^2.7.1"
|
||||
},
|
||||
"bin": "cli.js",
|
||||
"scripts": {
|
||||
"lint": "eslint katex.js server.js cli.js webpack.config.js webpackDevServer.js src test contrib dockers && stylelint static/fonts.less static/katex.less",
|
||||
"lint": "eslint katex.js katex.webpack.js cli.js webpack.common.js webpack.config.js webpack.dev.js src test contrib dockers && stylelint static/fonts.less static/katex.less",
|
||||
"flow": "flow",
|
||||
"jest": "jest",
|
||||
"jest-update": "jest --updateSnapshot",
|
||||
"coverage": "jest --coverage",
|
||||
"copy": "cp -a static/. build/ && cp -a contrib build/",
|
||||
"clean": "rm -rf build/* node_modules/",
|
||||
"clean-install": "npm run clean && npm i",
|
||||
"test": "check-dependencies && npm run lint && npm run flow && npm run jest",
|
||||
"build-css": "lessc --clean-css static/katex.less build/katex.css",
|
||||
"prestart": "rimraf build && npm run build-css && npm run copy",
|
||||
"start": "check-dependencies && node webpackDevServer.js",
|
||||
"start": "check-dependencies && webpack-dev-server --open --config webpack.dev.js",
|
||||
"build": "check-dependencies && rimraf build/* && webpack",
|
||||
"watch": "npm run build -- --watch",
|
||||
"prepublishOnly": "make NIS= dist"
|
||||
},
|
||||
"pre-commit": [
|
||||
|
||||
106
server.js
106
server.js
@@ -1,106 +0,0 @@
|
||||
/* eslint no-console:0 */
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
|
||||
const babelify = require("babelify");
|
||||
const browserify = require("browserify");
|
||||
const express = require("express");
|
||||
const glob = require("glob");
|
||||
const less = require("less");
|
||||
|
||||
const app = express();
|
||||
|
||||
if (require.main === module) {
|
||||
app.use(require("morgan")(
|
||||
":date[iso] :method :url HTTP/:http-version - :status"));
|
||||
}
|
||||
|
||||
function serveBrowserified(file, standaloneName) {
|
||||
return function(req, res, next) {
|
||||
let files;
|
||||
if (Array.isArray(file)) {
|
||||
files = file.map(function(f) { return path.join(__dirname, f); });
|
||||
} else if (file.indexOf("*") !== -1) {
|
||||
files = glob.sync(file, {cwd: __dirname});
|
||||
} else {
|
||||
files = [path.join(__dirname, file)];
|
||||
}
|
||||
|
||||
const options = {
|
||||
transform: [babelify],
|
||||
};
|
||||
if (standaloneName) {
|
||||
options.standalone = standaloneName;
|
||||
}
|
||||
const b = browserify(files, options);
|
||||
const stream = b.bundle();
|
||||
|
||||
let body = "";
|
||||
stream.on("data", function(s) { body += s; });
|
||||
stream.on("error", function(e) { next(e); });
|
||||
stream.on("end", function() {
|
||||
res.setHeader("Content-Type", "text/javascript");
|
||||
res.send(body);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function browserified(url, file, standaloneName) {
|
||||
app.get(url, serveBrowserified(file, standaloneName));
|
||||
}
|
||||
|
||||
function getStatic(url, file) {
|
||||
app.use(url, express.static(path.join(__dirname, file)));
|
||||
}
|
||||
|
||||
browserified("/katex.js", "katex", "katex");
|
||||
browserified("/test/katex-spec.js", "test/*[Ss]pec.js");
|
||||
browserified(
|
||||
"/contrib/auto-render/auto-render.js",
|
||||
"contrib/auto-render/auto-render",
|
||||
"renderMathInElement");
|
||||
browserified(
|
||||
"/contrib/copy-tex/copy-tex.js",
|
||||
"contrib/copy-tex/copy-tex");
|
||||
|
||||
app.use("/katex.css", function(req, res, next) {
|
||||
const lessfile = path.join(__dirname, "static", "katex.less");
|
||||
fs.readFile(lessfile, {encoding: "utf8"}, function(err, data) {
|
||||
if (err) {
|
||||
next(err);
|
||||
return;
|
||||
}
|
||||
|
||||
less.render(data, {
|
||||
paths: [path.join(__dirname, "static")],
|
||||
filename: "katex.less",
|
||||
}, function(err, output) {
|
||||
if (err) {
|
||||
console.error(String(err));
|
||||
next(err);
|
||||
return;
|
||||
}
|
||||
|
||||
res.setHeader("Content-Type", "text/css");
|
||||
res.send(output.css);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
getStatic("", "static");
|
||||
getStatic("", "build");
|
||||
getStatic("/test", "test");
|
||||
getStatic("/contrib", "contrib");
|
||||
|
||||
app.use(function(err, req, res, next) {
|
||||
console.error(err.stack);
|
||||
res.setHeader("Content-Type", "text/plain");
|
||||
res.send(500, err.stack);
|
||||
});
|
||||
|
||||
if (require.main === module) {
|
||||
app.listen(7936);
|
||||
console.log("Serving on http://0.0.0.0:7936/ ...");
|
||||
}
|
||||
|
||||
module.exports = app;
|
||||
@@ -4,7 +4,6 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>KaTeX Test</title>
|
||||
<script src="katex.js" type="text/javascript"></script>
|
||||
<link href="katex.css" rel="stylesheet" type="text/css">
|
||||
<link href="main.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
<head>
|
||||
<title>Screenshotter test</title>
|
||||
<script src="../../katex.js" type="text/javascript"></script>
|
||||
<link href="../../katex.css" rel="stylesheet" type="text/css">
|
||||
<style type="text/css">
|
||||
#math, #pre, #post {
|
||||
font-size: 4em;
|
||||
|
||||
121
webpack.common.js
Normal file
121
webpack.common.js
Normal file
@@ -0,0 +1,121 @@
|
||||
// @flow
|
||||
const path = require('path');
|
||||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const webpack = require('webpack');
|
||||
|
||||
/*::
|
||||
type Target = {|
|
||||
name: string, // the name of output JS/CSS
|
||||
entry: string, // the path to the entry point
|
||||
library?: string // the name of the exported module
|
||||
|};
|
||||
*/
|
||||
|
||||
/**
|
||||
* List of targets to build
|
||||
*/
|
||||
const targets /*: Array<Target> */ = [
|
||||
{
|
||||
name: 'katex',
|
||||
entry: './katex.webpack.js',
|
||||
library: 'katex',
|
||||
},
|
||||
{
|
||||
name: 'contrib/auto-render',
|
||||
entry: './contrib/auto-render/auto-render.js',
|
||||
library: 'renderMathInElement',
|
||||
},
|
||||
{
|
||||
name: 'contrib/copy-tex',
|
||||
entry: './contrib/copy-tex/copy-tex.js',
|
||||
},
|
||||
{
|
||||
name: 'contrib/mathtex-script-type',
|
||||
entry: './contrib/mathtex-script-type/mathtex-script-type.js',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Create a webpack config for given target
|
||||
*/
|
||||
function createConfig(target /*: Target */, dev /*: boolean */,
|
||||
minimize /*: boolean */) /*: Object */ {
|
||||
const cssLoader = {
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
minimize, // cssnano
|
||||
},
|
||||
};
|
||||
return {
|
||||
context: __dirname,
|
||||
entry: {
|
||||
[target.name]: target.entry,
|
||||
},
|
||||
output: {
|
||||
filename: minimize ? '[name].min.js' : '[name].js',
|
||||
library: target.library,
|
||||
libraryTarget: 'umd',
|
||||
libraryExport: 'default',
|
||||
path: path.resolve(__dirname, 'build'),
|
||||
publicPath: dev ? '/' : '',
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
use: 'babel-loader',
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: [cssLoader],
|
||||
}),
|
||||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: [cssLoader, {
|
||||
loader: 'less-loader',
|
||||
}],
|
||||
}),
|
||||
},
|
||||
{
|
||||
test: /\.(ttf|woff|woff2)$/,
|
||||
use: [{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: 'fonts/[name].[ext]',
|
||||
},
|
||||
}],
|
||||
},
|
||||
],
|
||||
},
|
||||
externals: 'katex',
|
||||
plugins: [
|
||||
new webpack.EnvironmentPlugin({
|
||||
NODE_ENV: dev ? 'development' : 'production',
|
||||
}),
|
||||
minimize && new UglifyJsPlugin({
|
||||
uglifyOptions: {
|
||||
output: {
|
||||
ascii_only: true,
|
||||
},
|
||||
},
|
||||
}),
|
||||
new ExtractTextPlugin({
|
||||
filename: minimize ? '[name].min.css' : '[name].css',
|
||||
disable: dev,
|
||||
}),
|
||||
].filter(Boolean),
|
||||
devtool: dev && 'inline-source-map',
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
targets,
|
||||
createConfig,
|
||||
};
|
||||
@@ -1,61 +1,7 @@
|
||||
const path = require('path');
|
||||
// @flow
|
||||
const { targets, createConfig } = require('./webpack.common');
|
||||
|
||||
const katexConfig = {
|
||||
entry: ['./katex.js'],
|
||||
output: {
|
||||
path: path.join(__dirname, 'build'),
|
||||
filename: 'katex.js',
|
||||
library: 'katex',
|
||||
libraryTarget: 'umd',
|
||||
},
|
||||
};
|
||||
|
||||
const copyTexConfig = {
|
||||
entry: ['./contrib/copy-tex/copy-tex.js'],
|
||||
output: {
|
||||
path: path.join(__dirname, 'build', 'contrib', 'copy-tex'),
|
||||
filename: 'copy-tex.js',
|
||||
},
|
||||
};
|
||||
|
||||
const autoRenderConfig = {
|
||||
entry: ['./contrib/auto-render/auto-render.js'],
|
||||
output: {
|
||||
path: path.join(__dirname, 'build', 'contrib', 'auto-render'),
|
||||
filename: 'auto-render.js',
|
||||
library: 'renderMathInElement',
|
||||
libraryTarget: 'umd',
|
||||
},
|
||||
};
|
||||
|
||||
const commonConfig = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
use: 'babel-loader',
|
||||
exclude: /\bnode_modules\b/,
|
||||
},
|
||||
],
|
||||
},
|
||||
devtool: 'eval-source-map',
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
compilerConfig: [
|
||||
Object.assign({}, katexConfig, commonConfig),
|
||||
Object.assign({}, copyTexConfig, commonConfig),
|
||||
Object.assign({}, autoRenderConfig, commonConfig),
|
||||
],
|
||||
devServerConfig: {
|
||||
publicPath: '/',
|
||||
contentBase: path.join(__dirname, 'build'),
|
||||
stats: {
|
||||
colors: true,
|
||||
},
|
||||
// Allow server to be accessed from anywhere, which is useful for
|
||||
// testing. This potentially reveals the source code to the world,
|
||||
// but this should not be a concern for testing open-source software.
|
||||
disableHostCheck: true,
|
||||
},
|
||||
};
|
||||
module.exports = [ // dev minify
|
||||
...targets.map(target => createConfig(target, false, false)),
|
||||
...targets.map(target => createConfig(target, false, true)),
|
||||
];
|
||||
|
||||
25
webpack.dev.js
Normal file
25
webpack.dev.js
Normal file
@@ -0,0 +1,25 @@
|
||||
// @flow
|
||||
const { targets, createConfig } = require('./webpack.common');
|
||||
const path = require('path');
|
||||
const PORT = 7936;
|
||||
|
||||
// only the `devServer` options for the first configuration will be taken
|
||||
// into account and used for all the configurations in the array.
|
||||
// dev minify
|
||||
const katexConfig = createConfig(targets.shift(), true, false);
|
||||
katexConfig.devServer = {
|
||||
contentBase: [path.join(__dirname, 'static'), __dirname],
|
||||
// Allow server to be accessed from anywhere, which is useful for
|
||||
// testing. This potentially reveals the source code to the world,
|
||||
// but this should not be a concern for testing open-source software.
|
||||
disableHostCheck: true,
|
||||
port: PORT,
|
||||
stats: {
|
||||
colors: true,
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = [
|
||||
katexConfig,
|
||||
...targets.map(target => createConfig(target, true, false)),
|
||||
];
|
||||
@@ -1,15 +0,0 @@
|
||||
/* eslint no-console:0 */
|
||||
|
||||
const WebpackDevServer = require("webpack-dev-server");
|
||||
const webpack = require("webpack");
|
||||
const webpackConfig = require("./webpack.config.js");
|
||||
const PORT = 7936;
|
||||
|
||||
webpackConfig.compilerConfig.forEach((config) => {
|
||||
config.entry.unshift(`webpack-dev-server/client?http://localhost:${PORT}/`);
|
||||
});
|
||||
const compiler = webpack(webpackConfig.compilerConfig);
|
||||
const server = new WebpackDevServer(compiler, webpackConfig.devServerConfig);
|
||||
|
||||
server.listen(PORT);
|
||||
console.log(`Serving on http://localhost:${PORT}/ ...`);
|
||||
Reference in New Issue
Block a user