Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

build (js): Update Webpack to Webpack 5 #94

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

build (js): Update Webpack to Webpack 5 #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ef63360
build (js): Update Webpack to Webpack 5
squishyfoxkitten Jul 26, 2022
fa3fb0f
build (js): Add browser esm module
squishyfoxkitten Aug 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 18 additions & 13 deletions js/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,31 +16,36 @@
},
"scripts": {
"dev": "webpack-dev-server --hot --config webpack.base.cjs --env development",
"build:publish": "rimraf dist && yarn build:rust && yarn build:webpack && yarn build:webpack:production",
"build:rust": "rimraf src/buttplug-rs-ffi && cd ../ffi && cross-env RUSTFLAGS=\"--cfg=web_sys_unstable_apis\" wasm-pack build -d../js/src/buttplug-rs-ffi --release -- --features wasm --no-default-features && cd ../js && node scripts/modularize.cjs wasm-pack && rimraf src/buttplug-rs-ffi/.gitignore src/buttplug-rs-ffi/package.json src/buttplug-rs-ffi/README.md",
"build:main": "tsc -p tsconfig.json && copyfiles -u 1 \"src/**/*.js\" dist/module && copyfiles -u 1 \"src/**/*.d.ts\" dist/module && copyfiles -u 1 \"src/**/*.wasm\" dist/module",
"build:publish": "rimraf dist && yarn build:rust && yarn build:main && yarn build:webpack:umd && yarn build:webpack:umd:production && yarn build:webpack:module && yarn build:webpack:module:production",
"build:rust": "rimraf src/buttplug-rs-ffi && cd ../ffi && cross-env RUSTFLAGS=\"--cfg=web_sys_unstable_apis\" wasm-pack build -d ../js/src/buttplug-rs-ffi --release -- --features wasm --no-default-features && cd ../js && node scripts/modularize.cjs wasm-pack && rimraf src/buttplug-rs-ffi/.gitignore src/buttplug-rs-ffi/package.json src/buttplug-rs-ffi/README.md",
"build:main": "tsc -p tsconfig.json && copyfiles -u 1 \"src/**/*.js\" dist/node && copyfiles -u 1 \"src/**/*.d.ts\" dist/node && copyfiles -u 1 \"src/**/*.wasm\" dist/node",
"build:proto": "pbjs -t static-module -w es6 -o src/buttplug_ffi.js ../protobuf_schemas/buttplug_rs_ffi.proto && node scripts/modularize.cjs pbjs && pbjs -t static-module ../protobuf_schemas/buttplug_rs_ffi.proto | pbts -o src/buttplug_ffi.d.ts -",
"build:webpack": "yarn build:main && webpack --progress --config webpack.base.cjs --env development",
"build:webpack:production": "webpack --progress --config webpack.base.cjs --env production"
"build:webpack:umd": "webpack --progress --config webpack.base.cjs --env development",
"build:webpack:umd:production": "webpack --progress --config webpack.base.cjs --env production",
"build:webpack:module": "webpack --progress --config webpack.module.cjs --env development",
"build:webpack:module:production": "webpack --progress --config webpack.module.cjs --env production"
},
"sideEffects": "false",
"type": "module",
"main": "./dist/module/index.js",
"main": "./dist/node/index.js",
"exports": {
"node": "./dist/module/index.js",
"browser": "./dist/web/buttplug.min.js"
"types": "./dist/node/index.d.ts",
"node": "./dist/node/index.js",
"import": "./dist/module/buttplug.min.js",
"browser": "./dist/module/buttplug.min.js"
},
"imports": {
"#buttplug_rs_ffi_bg": {
"node": "./dist/module/buttplug-rs-ffi/buttplug_rs_ffi_bg_node.js"
"node": "./dist/node/buttplug-rs-ffi/buttplug_rs_ffi_bg_node.js"
}
},
"types": "./dist/module/index.d.ts",
"types": "./dist/node/index.d.ts",
"dependencies": {
"protobufjs": "^6.11.2",
"websocket": "^1.0.34"
},
"devDependencies": {
"buffer": "^6.0.3",
"copyfiles": "^2.4.1",
"cross-env": "^7.0.3",
"fork-ts-checker-webpack-plugin": "^6.5.0",
Expand All @@ -51,9 +56,9 @@
"ts-proto": "^1.93.1",
"typescript": "^4.5.2",
"uglify-js": "^3.14.4",
"webpack": "^4",
"webpack-cli": "^3",
"webpack-dev-server": "^3.11.2",
"webpack": "~5.74.0",
"webpack-cli": "^4",
"webpack-dev-server": "^4.9.3",
"webpack-merge": "^5.8.0",
"yarn": "^1.22.17"
}
Expand Down
4 changes: 2 additions & 2 deletions js/index.html → js/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<head></head>
<body>
<button id="run" onclick="scan()">Run</button>
<script lang="javascript"
src="./dist/web/buttplug.min.js">
<script lang="javascript"
src="./buttplug.js">
</script>
<script lang="javascript">
let client;
Expand Down
2 changes: 1 addition & 1 deletion js/scripts/test_node.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ if (!process.execArgv.includes("--experimental-wasm-modules")) {


async function main() {
const { buttplugInit, ButtplugWebsocketConnectorOptions, ButtplugClient } = await import("../dist/module/index.js");
const { buttplugInit, ButtplugWebsocketConnectorOptions, ButtplugClient } = await import("../dist/node/index.js");
await buttplugInit();
const connector = new ButtplugWebsocketConnectorOptions(socketAddress);
const client = new ButtplugClient("test_node");
Expand Down
2 changes: 1 addition & 1 deletion js/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"strictNullChecks": true,
"noImplicitThis": true,
"declaration": true,
"outDir": "./dist/module",
"outDir": "./dist/node",
"esModuleInterop": true,
},
"include": [
Expand Down
32 changes: 20 additions & 12 deletions js/webpack.base.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const base = {
chunks: false,
chunkModules: false
},
entry: path.resolve('./src/web_index.ts'),
entry: path.resolve('./src/index.ts'),
output: {
path: path.resolve('./dist/web'),
filename: 'buttplug.js',
Expand Down Expand Up @@ -44,18 +44,27 @@ const base = {
}
]
},
experiments: {
syncWebAssembly: true
},
resolve: {
extensions: [".ts", ".js"]
extensions: [".ts", ".js"],
fallback: {
buffer: require.resolve('buffer/'),
},
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: 'inline-source-map',
plugins: [
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),

// ES Module imports require file extensions, but Webpack 4.x/ts-loader doesn't understand
// how to handle that. Instead, we rewrite those imports to use a '.ts' extension instead,
// if one exists.
Expand Down Expand Up @@ -92,16 +101,15 @@ const production = {
minimize: true,
mangleWasmImports: false
},
devtool: '#source-map',
devtool: 'source-map',
};

module.exports = env => {
switch(env) {
case 'development':
return base;
case 'production':
return merge(base, production);
default:
throw new Error('No matching configuration was found!');
module.exports = (env, _argv) => {
if (env.development) {
return base;
} else if (env.production) {
return merge(base, production);
} else {
throw new Error('No matching configuration was found!');
}
}
113 changes: 113 additions & 0 deletions js/webpack.module.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
'use strict';
var path = require('path');
var fs = require('fs');
var webpack = require('webpack');
const { merge } = require('webpack-merge');

const base = {
name: "library",
mode: "development",
stats: {
assets: false,
colors: true,
version: false,
hash: true,
timings: true,
chunks: false,
chunkModules: false
},
entry: path.resolve('./src/index.ts'),
output: {
path: path.resolve('./dist/module'),
filename: 'buttplug.js',
library: {
type: "module"
}
},
externals: {
websocket: 'commonjs websocket'
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules|vue\/src|tests|example/,
use: [{
loader: 'ts-loader',
options: {
transpileOnly: true
}
}]
}
]
},
experiments: {
syncWebAssembly: true,
outputModule: true,
},
resolve: {
extensions: [".ts", ".js"],
fallback: {
buffer: require.resolve('buffer/'),
},
},
devServer: {
historyApiFallback: true,
},
performance: {
hints: false
},
devtool: 'inline-source-map',
plugins: [
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),

// ES Module imports require file extensions, but Webpack 4.x/ts-loader doesn't understand
// how to handle that. Instead, we rewrite those imports to use a '.ts' extension instead,
// if one exists.
new webpack.NormalModuleReplacementPlugin(/\.js$/, resource => {
if (resource.request.startsWith("./") && resource.request.endsWith(".js")) {
if (fs.existsSync(path.join(resource.context, resource.request.slice(0, -3) + ".ts"))) {
resource.request = resource.request.slice(0, -3) + ".ts";
return;
}
}
}),

// Webpack 4.x/ts-loader doesn't understand NodeJS import maps, which we use to
// redirect the wasm->js interop script into different variations based on whether
// we are running in NodeJS or in the browser. The following rewrites the import
// mapping for '#buttplug_rs_ffi_bg' to point to the webpack-compatible version.
new webpack.NormalModuleReplacementPlugin(/^#/, resource => {
if (resource.request === "#buttplug_rs_ffi_bg") {
resource.request = path.join(__dirname, "src/buttplug-rs-ffi/buttplug_rs_ffi_bg_web.js");
}
}),
]
};

const production = {
mode: "production",
output: {
filename: `buttplug.min.js`
},
externals: {
websocket: 'commonjs websocket'
},
optimization: {
minimize: true,
mangleWasmImports: false
},
devtool: 'source-map',
};

module.exports = (env, _argv) => {
if (env.development) {
return base;
} else if (env.production) {
return merge(base, production);
} else {
throw new Error('No matching configuration was found!');
}
}
Loading