Skip to main content

Command Palette

Search for a command to run...

The powerful and useful tool - NPM Scripts

Published
L

Full stack web 3D developer

In the project which the series articles introduce, we should generate the script file from .proto file, debug by starting client and server process. It's not convenient to excute the command repeatly. The solution to make development simple is config the commands in npm scripts.

What is a npm script?

Npm allows scripting commands to be defined using the scripts field in the package.json file.

{
   // ...
   "scripts": {
     "build": "node build.js"
   }
}

The above code is a fragment of the package.json file, and the scripts field in it is an object. Each of its properties corresponds to a script. For example, the script corresponding to the build command is node build.js.

Use the npm run command from the command line to execute this script.

$ npm run build
# is equivalent to executing
$ node build.js

These scripts defined in package.json are called npm scripts. It has many advantages.

Project-related scripts can be centralized in one place. Script commands of different projects can have the same external interface as long as they have the same function. We don't need to know how to test your project, just run npm run test. There are many helper functions that npm provides. To view all npm script commands for the current project, you can use the npm run command without any arguments.

$ npm run

Bellow is the package.json scripts section in my series article project:

"scripts": {
    "start-server": "ts-node server/index.ts",
    "start-client": "ts-node client/index.ts",
    "pbts": "./share/proto/protoc --plugin=protoc-gen-ts_proto=./node_modules/.bin/protoc-gen-ts_proto --ts_proto_opt=esModuleInterop=true --ts_proto_out=. ./share/proto/card-game.proto"
  },

Before I config the scripts section, I should input the command in my terminal everytime. Now, I just input npm run start-server to establish a server and npm run start-client to run a client.

Npm scripts make my development easier and save much time for me.

We can do almost all build tasks with npm scripts, if you have interests, read the reference to get more.

References:

[https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/](https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/) by Keith Cirkel

https://www.ruanyifeng.com/blog/2016/10/npm_scripts.html by Ruanyifeng

More from this blog

如何将静态页面部署到Github Page,并绑定自定义域名

在仓库主页选择setting 点击pages 选择分支branch 输入自定义域名custom domain(设置好后点击save,系统将自动在项目根目录生成CNAME文件,文件内容为设置的当前域名) 在域名提供商处,添加DNS设置(以阿里云为例) 配置CNAME 配置IP,创建一个A类记录指向185.199.108.153 github将根据访问域名路由项目仓库(仓库名称为iddz.fun,并且根目录有CNAME文件) 最后,通过访问自定义域名,完成静态网站的部署...

Oct 4, 2023
如何将静态页面部署到Github Page,并绑定自定义域名

熟悉熟悉官方文档,逐步深入Babylon.js

文档的组织结构 通过前一篇文章的了解,我们会对Babylon.js有了一个大致的了解,整个文档主要是想带你逐步深入掌握这个Babylon.js所提供的所有内容。 内容主要分为一个概览和9个主要部分,这些部分包含章节,还有API详解和强大的文档和playground搜索功能。 - 1.Babylon.js特性 - Babylon.js是一个功能完备的游戏和渲染引擎,具有广泛的特性。这个部分将带你了解这些特性,并帮助你编码和使用它们。- 2.将Babylon.js添加到你的Web项目中 - 有多种...

Sep 25, 2023
熟悉熟悉官方文档,逐步深入Babylon.js

Lizhiyu's Blog

33 posts

Bringing the world closer together through play