From 5f32b71c859d0ef48c349cb1fa00cf7e7fff808f Mon Sep 17 00:00:00 2001 From: ylemkimon Date: Mon, 22 Jan 2018 09:48:25 +0900 Subject: [PATCH] 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 f6b509123bc142612a816b9525c87c0c85406157. * 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 --- .babelrc | 16 +- CONTRIBUTING.md | 10 +- Makefile | 51 +- contrib/auto-render/Makefile | 9 - contrib/auto-render/README.md | 4 +- contrib/auto-render/auto-render.js | 4 +- contrib/auto-render/index.html | 7 +- contrib/copy-tex/Makefile | 15 - contrib/copy-tex/README.md | 4 +- contrib/copy-tex/copy-tex.js | 1 + contrib/copy-tex/index.html | 10 +- contrib/mathtex-script-type/Makefile | 9 - .../mathtex-script-type.js | 42 +- dockers/Screenshotter/screenshotter.js | 11 +- katex.js | 2 +- katex.webpack.js | 11 + package-lock.json | 2514 ++++++++++++++--- package.json | 26 +- server.js | 106 - static/index.html | 1 - test/screenshotter/test.html | 1 - webpack.common.js | 121 + webpack.config.js | 66 +- webpack.dev.js | 25 + webpackDevServer.js | 15 - 25 files changed, 2298 insertions(+), 783 deletions(-) delete mode 100644 contrib/auto-render/Makefile delete mode 100644 contrib/copy-tex/Makefile delete mode 100644 contrib/mathtex-script-type/Makefile create mode 100644 katex.webpack.js delete mode 100644 server.js create mode 100644 webpack.common.js create mode 100644 webpack.dev.js delete mode 100644 webpackDevServer.js diff --git a/.babelrc b/.babelrc index 09bb8eaa..7995b245 100644 --- a/.babelrc +++ b/.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" + ], + } + } } diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 82d6a55b..12cdf585 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -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 diff --git a/Makefile b/Makefile index 1d6d2782..e6bd9f70 100644 --- a/Makefile +++ b/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 diff --git a/contrib/auto-render/Makefile b/contrib/auto-render/Makefile deleted file mode 100644 index 8e8de6fd..00000000 --- a/contrib/auto-render/Makefile +++ /dev/null @@ -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 > $@ diff --git a/contrib/auto-render/README.md b/contrib/auto-render/README.md index 91d3bf1a..dd2a54cc 100644 --- a/contrib/auto-render/README.md +++ b/contrib/auto-render/README.md @@ -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 ``, diff --git a/contrib/auto-render/auto-render.js b/contrib/auto-render/auto-render.js index 8a77e233..364344e8 100644 --- a/contrib/auto-render/auto-render.js +++ b/contrib/auto-render/auto-render.js @@ -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; diff --git a/contrib/auto-render/index.html b/contrib/auto-render/index.html index 64d9f67b..56c4070e 100644 --- a/contrib/auto-render/index.html +++ b/contrib/auto-render/index.html @@ -1,15 +1,14 @@ - Auto-render test - - +