A transpiler is a compiler capable of one-to-one conversion from file to file. In the JS world, common out-of-the-box transpilers are typescript cli , babel cli , etc., but they generally only process script files such as .js , .ts and so on. Although webpack can process various files through configuration, it pays more attention to how to package JS, and it is quite troublesome to do one-to-one conversion of files.
In order to solve these limitations, as a supplement to configure webpack compilation, wuzzle provides JS translation commands based on webpack packaging wuzzle transpile , the following is the specific usage.
Use wuzzle transpile translate .ts file
First, let's look at the translation of the wuzzle transpile to .ts file. Initialize an empty directory demo and install wuzzle:
$ mkdir demo
# ...
$ cd demo
# ...
$ npm init -y
# ...
$ npm i -D wuzzle Prepare a simple server code at src/server.ts and install the required dependencies:
import express from 'express';
const port = process.env.PORT ?? '5000';
const app = express();
app.get('/', (req, res) => {
res.send('<!DOCTYPE html><html><head></head><body>Hello, wuzzle!</body></html>');
});
app.listen(port, () => console.log(`Started on port ${port}.`)); $ npm i -S express
# ...
$ npm i -D @types/express By default wuzzle transpile the translation behavior is equivalent to zero-configuration webpack, which does almost nothing and needs to install webpack to process .ts the file needs to depend on and configure.
Therefore, install typescript , ts-loader , with the help of tsc --init to create tsconfig.json
$ npm i -D "ts-loader@^7.0.5" "typescript@~4.6.0"
# ...
$ npx tsc --init
Created a new tsconfig.json with: # ... Then, create the file wuzzle.config.js configure---41289418a34e8f049fe691b0ba2a03f0 package.json next to wuzzle transpile :
module.exports = (webpackConfig) => {
webpackConfig.module = {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
},
],
};
webpackConfig.resolve = {
extensions: ['.ts', '.js', '.json'],
};
}; At the same time, for convenience, write the startup script and build script in package.json :
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "start": "node dist/server",
+ "build": "wuzzle transpile \"src/**/*\" -d dist"
}, Now, by executing the build script, you can translate the .js .ts into the ---64fc0cc904 file through wuzzle transpile f9418f7302021c442bc40a64908b0846---
$ npm run build
Start compiling 'src/**/*.ts'.
File 'src/server.ts' compiled.
All files compiled. After the translation is completed, you can start the server through the start script, and visit http://localhost:5000 , you can see the running effect:
$ npm start
# ...
Started on port 5000. Use wuzzle transpile translate the image file
Next, let's look at wuzzle transpile the translation of other files, such as pictures. In fact, this is similar to the translation .ts file, which is to convert the input file into a .js file according to the specified configuration, the difference is that the input file is a picture.
Here, use url-loader to process the image and install the dependencies:
$ npm i -D url-loader Adjust wuzzle.config.js :
webpackConfig.module = {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
},
+ {
+ test: /\.jpg$/,
+ loader: 'url-loader',
+ },
],
}; Then, put the picture src/logo.jpg and quote it in src/server.ts :
import express from 'express';
+import logo from './logo.jpg';
...
app.get('/', (req, res) => {
- res.send(`<!DOCTYPE html><html><head></head><body>Hello, wuzzle!</body></html>`);
+ res.send(`<!DOCTYPE html><html><head></head><body><img src="${logo}" /></body></html>`);
}); For TS type checking to correctly identify image files, create the file src/modules.d.ts :
declare module '*.jpg' {
const o: string;
export default o;
} npm start ，关闭正在运行的---115982f260dc501d510871c4409a3c03--- 、重新执行npm run build 、 npm start 、刷新---4b34fd2f16800a3ae2f88c08a08735a7--- ，就可以看到http://localhost:5000引用operation effect.
Optimization and debugging
It is not difficult to find that the build products in the dist directory have two small problems: 1. The size is not compressed, and 2. The source map is not generated. This can be optimized by adding parameters -p and -s package.json the build script of ---cb793645fdfca5b51688cb3846061ae7---:
"scripts": {
...
- "build": "wuzzle transpile \"src/**/*\" -d dist"
+ "build": "wuzzle transpile \"src/**/*\" -d dist -p -s"
} In addition, there is a small problem in the development experience. Every time you modify the files under src , you need to manually build and start them again. This can be solved by combining the parameters -w and nodemon .
First in package.json write watch script:
"scripts": {
...
+ "watch": "wuzzle transpile \"src/**/*\" -d dist -w -s"
}, watch The script will do a full post-build watch src/**/* to rebuild the changed files. Among them, the parameter -s is used to generate the source map.
After that, install nodemon and another auxiliary command line tool concurrently and write dev be0354 in package.json c2b4c00173595587ef49a10f44b256ce---script
$ npm i -D nodemon concurrently "scripts": {
...
+ "dev": "concurrently \"npm:watch\" \"nodemon dist/server -d 2 -w dist\""
} dev watch脚本和nodemon命令，当src目录下有文件变化时dist The corresponding files in the directory will be rebuilt, which will cause the server to restart. In this way, you can use the dev script to get a better development experience when debugging.
When to use wuzzle transpile
If the input files to be translated are mainly script files such as .js and .ts , typescript cli and babel cli may be enough. But if you need to translate images or other non-script files like in the example, wuzzle transpile would be a good choice.
In a typical scenario, such as when doing SSR (server-side rendering), the browser side has already configured webpack packaging, and the server side can reuse the same configuration through wuzzle transpile to do JS translation and let the browser-side code are seamlessly referenced to the server. At the same time, compared to reusing the same configuration on the server for direct webpack packaging, this can preserve the directory structure before and after the build, keeping server-side development simple.
If you are interested, the official wuzzle examplee2e/.../react-scripts provides a real application built by combining CRA and wuzzle. The src/server directory implements SSR for reference.
write at the end
At present, the example project in the article has been included in wuzzle-blog/.../demo , readers and friends can open the reference as needed. If you have any questions or ideas, please leave a message. In addition, if you have any questions or ideas about wuzzle, you are welcome to create an issue in wuzzle/issues , both in Chinese and English. If you are interested and have time to contribute code, please submit PR. For details, please refer to the development guide . Finally, if you think the gadget is helpful, you can order a small ⭐️ in the GitHub repo wuzzle to compare your heart.
read more
Wuzzle, you can customize the React application created by create-react-app without eject
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。