• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 在 centOS 上安装 express、webpack、rollup

    局部安装 express

    Express基于 NodeJs 平台,快速、简洁的 Web 应用框架,为 Web 和移动应用程序提供一组强大的功能。中文:https://www.expressjs.com.cn

    cd /var/web/www/exampleSSR
    
    # 在项目中,安装 Express
    npm install express -S
    
    # 在项目中,安装 TypeScript 依赖
    npm install @types/express -D
    

    node 无法直接运行 ts 文件,需要使用 ts-node。Express 是基于 node 环境的,所以还需要安装 node TypeScript 依赖。

    cd /var/web/www/exampleSSR
    
    # 在项目中,安装 ts-node
    npm install ts-node -D
    
    # 在项目中,安装 TypeScript 依赖
    npm install @types/node -D
    

    查看已安装

    npm list
    npm list express
    npm list ts-node
    


    安装 webpack

    Webpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模块进行打包。中文网站:https://www.webpackjs.com

    webpack支持全局安装和本地安装,官方推荐是本地安装。进入项目目录安装:

    cd /var/web/www/myapp
    
    npm install webpack -D
    
    # webpack 4+ 版本,还需要安装 CLI:
    npm install webpack-cli -D
    
    # 安装 webpack-dev-server
    npm 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 作为构建工具的。