在 centOS 上安装 express、webpack、rollup
局部安装 express
Express基于 NodeJs 平台,快速、简洁的 Web 应用框架,为 Web 和移动应用程序提供一组强大的功能。中文:https://www.expressjs.com.cn
cd /var/web/www/exampleSSR # 在项目中,安装 Expressnpm install express -S # 在项目中,安装 TypeScript 依赖npm install @types/express -D
node 无法直接运行 ts 文件,需要使用 ts-node。Express 是基于 node 环境的,所以还需要安装 node TypeScript 依赖。
cd /var/web/www/exampleSSR # 在项目中,安装 ts-nodenpm install ts-node -D # 在项目中,安装 TypeScript 依赖npm install @types/node -D
查看已安装
npm listnpm list expressnpm list ts-node
安装 webpack
Webpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模块进行打包。中文网站:https://www.webpackjs.com
webpack支持全局安装和本地安装,官方推荐是本地安装。进入项目目录安装:
cd /var/web/www/myappnpm install webpack -D # webpack 4+ 版本,还需要安装 CLI:npm install webpack-cli -D # 安装 webpack-dev-servernpm install webpack-dev-server -D
rollup
Rollup,是一个 JavaScript ESM 打包器,可以将小块代码编译成更大更复杂的代码,例如 library 或应用程序。与 Webpack 偏向于应用打包的定位不同,rollup.js 更专注于 Javascript 类库打包。中文网址:https://www.rollupjs.com
webpack 和 rollup 在不同场景下,都能发挥自身优势作用。webpack 和 rollup 比较:
- webpack 对于代码分割和静态资源导入有着“先天优势”,并且支持热模块替换(HMR),而 rollup 并不支持。所以当开发应用时可以优先选择 webpack。
- Rollup 是一款 ES Module 打包器,从作用来看,Rollup 与Webpack 很相似,但 Rollup 更为小巧,仅仅是一款ESM打包器;Rollup 中不不支持类似的热模块替换(HMR)这种高级特性。rollup 对于代码的 Tree-shaking 和 ES6 模块有着算法优势上的支持,若你项目只需要打包出一个简单的 bundle 包,并是基于 ES6 模块开发的,可以考虑使用 rollup。
其实 webpack 从 2.0 开始就已经支持 Tree-shaking,并在使用 babel-loader 的情况下还可以支持 es6 module 的打包。实际上,rollup 已经在渐渐地失去了当初的优势了。但是它并没有被抛弃,反而因其简单的 API、使用方式被许多库开发者青睐,如 React、Vue 等,都是使用 rollup 作为构建工具的。