mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-06-27 21:05:53 +00:00
Dependency Maintenance
* Start using the [pnpm](https://pnpm.io/) package manager rather than npm. * Replace `node-sass` with `sass`. * Update versions of many dependencies * Didn't yet update webpack to v5, since that'll be a mess. * Clean some old build scripts out of package.json
This commit is contained in:
SirStendec
parent
76b72b86c8
commit
1c3e73e143
8 changed files with 6220 additions and 11504 deletions
|
|
@ -13,7 +13,7 @@ module.exports = {
|
|||
'react'
|
||||
],
|
||||
'parserOptions': {
|
||||
'parser': 'babel-eslint',
|
||||
'parser': '@babel/eslint-parser',
|
||||
'ecmaVersion': 8,
|
||||
'sourceType': 'module',
|
||||
'ecmaFeatures': {
|
||||
|
|
|
|||
17
README.md
17
README.md
|
|
@ -10,15 +10,16 @@ Developing
|
|||
==========
|
||||
|
||||
FrankerFaceZ uses node.js to manage development dependencies and to run an HTTP
|
||||
server for development. To get everything you need:
|
||||
server for development. This project uses the [pnpm](https://pnpm.io/) package
|
||||
manager. To get everything you need:
|
||||
|
||||
1. Install node.js and npm
|
||||
2. Run `npm install` within the FrankerFaceZ directory.
|
||||
1. Install node.js and [pnpm](https://pnpm.io/)
|
||||
2. Run `pnpm install` within the FrankerFaceZ directory.
|
||||
|
||||
|
||||
From there, you can use npm to build FrankerFaceZ from source simply by
|
||||
running `npm run build`. For development, you can instruct webpack to watch
|
||||
the source files for changes and re-build automatically with `npm start`
|
||||
running `pnpm build`. For development, you can instruct webpack to watch
|
||||
the source files for changes and re-build automatically with `pnpm start`
|
||||
|
||||
FrankerFaceZ comes with a local development server that listens on port 8000
|
||||
and it serves up local development copies of files, falling back to the CDN
|
||||
|
|
@ -36,13 +37,13 @@ It should be noted that this project is not a browser extension that you
|
|||
would load in your browser's extensions system. You still need the FrankerFaceZ
|
||||
extension or user-script for your browser.
|
||||
|
||||
You can edit the project's icon font using the `npm run font` command. This will
|
||||
You can edit the project's icon font using the `pnpm font` command. This will
|
||||
create a new Fontello session, if one doesn't already exist, and open your
|
||||
default web browser to Fontello so you can edit the font.
|
||||
|
||||
If you're running the development server with `npm start`, you'll be able to
|
||||
If you're running the development server with `pnpm start`, you'll be able to
|
||||
automatically save changes to the Fontello font by clicking Fontello's Export
|
||||
button. Otherwise, you can use `npm run font:save` to download the changes
|
||||
button. Otherwise, you can use `pnpm font:save` to download the changes
|
||||
from your session.
|
||||
|
||||
|
||||
|
|
|
|||
11441
package-lock.json
generated
11441
package-lock.json
generated
File diff suppressed because it is too large
Load diff
79
package.json
79
package.json
|
|
@ -10,56 +10,50 @@
|
|||
"eslint": "eslint \"src/**/*.{js,jsx,vue}\"",
|
||||
"clean": "rimraf dist",
|
||||
"dev": "webpack-dev-server --config webpack.web.dev.js",
|
||||
"dev:clips": "webpack-dev-server --config webpack.clips.dev.js",
|
||||
"dev:prod": "webpack-dev-server --config webpack.web.dev.prod.js",
|
||||
"build:all": "npm run build && npm run build:clips",
|
||||
"build": "npm run build:prod",
|
||||
"build:clips": "cross-env NODE_ENV=production webpack --config webpack.clips.prod.js",
|
||||
"build:clips:dev": "npm run clean && webpack --config webpack.clips.dev.js",
|
||||
"build": "pnpm build:prod",
|
||||
"build:stats": "cross-env NODE_ENV=production webpack --config webpack.web.prod.js --json > stats.json",
|
||||
"build:prod": "cross-env NODE_ENV=production webpack --config webpack.web.prod.js",
|
||||
"build:dev": "npm run clean && webpack --config webpack.web.dev.js",
|
||||
"font": "npm run font:edit",
|
||||
"build:dev": "pnpm clean && webpack --config webpack.web.dev.js",
|
||||
"font": "pnpm font:edit",
|
||||
"font:edit": "fontello-cli --cli-config fontello.client.json edit",
|
||||
"font:save": "fontello-cli --cli-config fontello.client.json save && npm run font:update",
|
||||
"font:save": "fontello-cli --cli-config fontello.client.json save && pnpm font:update",
|
||||
"font:update": "node bin/update_fonts"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.14.6",
|
||||
"@babel/plugin-proposal-class-properties": "^7.14.5",
|
||||
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.14.5",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.14.5",
|
||||
"@babel/core": "^7.16.0",
|
||||
"@babel/eslint-parser": "^7.16.0",
|
||||
"@babel/plugin-proposal-class-properties": "^7.16.0",
|
||||
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.16.0",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.16.0",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
"@babel/plugin-transform-react-jsx": "^7.14.5",
|
||||
"@babel/plugin-transform-react-jsx": "^7.16.0",
|
||||
"@ffz/fontello-cli": "^1.0.4",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-loader": "^8.2.2",
|
||||
"@webpack-cli/serve": "^1.6.0",
|
||||
"babel-loader": "^8.2.3",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"copy-webpack-plugin": "^5.1.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^3.6.0",
|
||||
"eslint": "^7.28.0",
|
||||
"eslint-plugin-react": "^7.24.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-react": "^7.26.1",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"extract-loader": "^2.0.1",
|
||||
"file-loader": "^4.3.0",
|
||||
"json-loader": "^0.5.7",
|
||||
"jszip": "^3.6.0",
|
||||
"node-sass": "^4.14.1",
|
||||
"jszip": "^3.7.1",
|
||||
"raw-loader": "^3.1.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"sass-loader": "^7.1.0",
|
||||
"sass-loader": "^7.3.1",
|
||||
"semver": "^7.3.5",
|
||||
"terser-webpack-plugin": "^3.1.0",
|
||||
"vue": "^2.6.14",
|
||||
"vue-loader": "^15.9.7",
|
||||
"vue-observe-visibility": "^0.4.6",
|
||||
"terser-webpack-plugin": "4",
|
||||
"vue-loader": "^15.9.8",
|
||||
"vue-template-compiler": "^2.6.14",
|
||||
"webpack": "^4.46.0",
|
||||
"webpack-cli": "^3.3.12",
|
||||
"webpack-dev-server": "^3.11.2",
|
||||
"webpack-manifest-plugin": "^2.2.0",
|
||||
"webpack-cli": "^4.9.1",
|
||||
"webpack-dev-server": "^4.4.0",
|
||||
"webpack-manifest-plugin": "^4.0.2",
|
||||
"webpack-merge": "^4.2.2"
|
||||
},
|
||||
"repository": {
|
||||
|
|
@ -68,30 +62,37 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@ffz/icu-msgparser": "^2.0.0",
|
||||
"chartjs": "^0.3.24",
|
||||
"chartjs-plugin-waterfall": "^1.0.3",
|
||||
"chartjs-plugin-zoom": "^0.7.7",
|
||||
"crypto-js": "^3.3.0",
|
||||
"dayjs": "^1.10.5",
|
||||
"dayjs": "^1.10.7",
|
||||
"displacejs": "^1.4.1",
|
||||
"emoji-regex": "^9.2.2",
|
||||
"file-saver": "^2.0.5",
|
||||
"graphql": "^15.5.0",
|
||||
"graphql-tag": "^2.12.4",
|
||||
"graphql": "^16.0.1",
|
||||
"graphql-tag": "^2.12.6",
|
||||
"js-cookie": "^2.2.1",
|
||||
"markdown-it": "^11.0.1",
|
||||
"markdown-it": "^12.2.0",
|
||||
"markdown-it-link-attributes": "^3.0.0",
|
||||
"mnemonist": "^0.38.3",
|
||||
"mnemonist": "^0.38.5",
|
||||
"path-to-regexp": "^3.2.0",
|
||||
"popper.js": "^1.16.1",
|
||||
"raven-js": "^3.24.2",
|
||||
"react": "^16.14.0",
|
||||
"raven-js": "^3.27.2",
|
||||
"react": "^17.0.2",
|
||||
"safe-regex": "^2.1.1",
|
||||
"sortablejs": "^1.13.0",
|
||||
"sass": "^1.43.4",
|
||||
"sortablejs": "^1.14.0",
|
||||
"sourcemapped-stacktrace": "^1.1.11",
|
||||
"text-diff": "^1.0.1",
|
||||
"vue": "^2.6.14",
|
||||
"vue-clickaway": "^2.2.2",
|
||||
"vue-color": "^2.8.1",
|
||||
"vue-observe-visibility": "^1.0.0",
|
||||
"vuedraggable": "^2.24.3"
|
||||
},
|
||||
"pnpm": {
|
||||
"overrides": {
|
||||
"ansi-regex@>2.1.1 <5.0.1": ">=5.0.1",
|
||||
"set-value@<4.0.1": ">=4.0.1",
|
||||
"glob-parent@<5.1.2": ">=5.1.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
6139
pnpm-lock.yaml
generated
Normal file
6139
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -27,18 +27,23 @@ module.exports = merge(common, {
|
|||
],
|
||||
|
||||
devServer: {
|
||||
hot: false,
|
||||
https: true,
|
||||
port: 8000,
|
||||
compress: true,
|
||||
inline: false,
|
||||
|
||||
allowedHosts: [
|
||||
'.twitch.tv',
|
||||
'.frankerfacez.com'
|
||||
],
|
||||
|
||||
contentBase: path.join(__dirname, 'dev_cdn'),
|
||||
publicPath: '/script/',
|
||||
static: {
|
||||
directory: path.join(__dirname, 'dev_cdn'),
|
||||
},
|
||||
|
||||
devMiddleware: {
|
||||
publicPath: '/script/',
|
||||
},
|
||||
|
||||
proxy: {
|
||||
'**': {
|
||||
|
|
@ -47,7 +52,9 @@ module.exports = merge(common, {
|
|||
}
|
||||
},
|
||||
|
||||
before(app) {
|
||||
onBeforeSetupMiddleware(devServer) {
|
||||
const app = devServer.app;
|
||||
|
||||
// Because the headers config option is broken.
|
||||
app.get('/*', (req, res, next) => {
|
||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
||||
|
|
|
|||
|
|
@ -22,18 +22,23 @@ module.exports = merge(prod, {
|
|||
],
|
||||
|
||||
devServer: {
|
||||
hot: false,
|
||||
https: true,
|
||||
port: 8000,
|
||||
compress: true,
|
||||
inline: false,
|
||||
|
||||
allowedHosts: [
|
||||
'.twitch.tv',
|
||||
'.frankerfacez.com'
|
||||
],
|
||||
|
||||
contentBase: path.join(__dirname, 'dev_cdn'),
|
||||
publicPath: '/script/',
|
||||
static: {
|
||||
directory: path.join(__dirname, 'dev_cdn'),
|
||||
},
|
||||
|
||||
devMiddleware: {
|
||||
publicPath: '/script/',
|
||||
},
|
||||
|
||||
proxy: {
|
||||
'**': {
|
||||
|
|
@ -42,7 +47,9 @@ module.exports = merge(prod, {
|
|||
}
|
||||
},
|
||||
|
||||
before(app) {
|
||||
onBeforeSetupMiddleware(devServer) {
|
||||
const app = devServer.app;
|
||||
|
||||
// Because the headers config option is broken.
|
||||
app.get('/*', (req, res, next) => {
|
||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const common = require('./webpack.web.common.js');
|
|||
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
const ManifestPlugin = require('webpack-manifest-plugin');
|
||||
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
|
||||
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
|
||||
|
||||
const Terser = require('terser');
|
||||
|
|
@ -15,6 +15,12 @@ const commit_hash = require('child_process').execSync('git rev-parse HEAD').toSt
|
|||
|
||||
/* global module Buffer */
|
||||
|
||||
const minifier = content => {
|
||||
const text = content.toString('utf8');
|
||||
const minified = Terser.minify(text);
|
||||
return (minified && minified.code) ? Buffer.from(minified.code) : content;
|
||||
};
|
||||
|
||||
module.exports = merge(common, {
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
|
|
@ -41,14 +47,10 @@ module.exports = merge(common, {
|
|||
{
|
||||
from: './src/entry.js',
|
||||
to: 'script.min.js',
|
||||
transform: content => {
|
||||
const text = content.toString('utf8');
|
||||
const minified = Terser.minify(text);
|
||||
return (minified && minified.code) ? Buffer.from(minified.code) : content;
|
||||
}
|
||||
transform: minifier
|
||||
}
|
||||
]),
|
||||
new ManifestPlugin({
|
||||
new WebpackManifestPlugin({
|
||||
publicPath: '',
|
||||
map: data => {
|
||||
if ( data.name.endsWith('.scss') )
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue