使用webpack打包koa2 框架app


Posted in Javascript onFebruary 02, 2018

以前在用koa写server的时候,发布简直是噩梦。需要将src里面的全部文件都覆盖掉,config配置文件也要覆盖,稍有不慎就会线上报各种各样的问题,然后就得回退,本地调好在发布。偶然看见一篇文章讲 如何使用webpack打包koa app ,惊为天人,原来webpack也能打包后台。这在以前想都没想过。

关键问题

一:所有node_modules里的模块都不进行打包

webpack的核心功能是将引用的各个模块打到一个文件里,并会将各种规范的模块进行统一的模块化处理(webpack规范)。

然而node中包含大量的fs、path操作,这些fs和path操作在打包完成后将没有操作对象,还会报出很多各样的错误。

所以使用webpack打包的核心就是拒绝打包一切node_modules里的模块,只是将相对路径引用的文件打包到一个文件里。恰巧我们发现webapck提供externals属性来排除掉不需要打包的模块。

再深入点我们可以发现:像webpack、nodemon、babel-preset-env这样的模块是app开发环境依赖的包,我们的程序里根本不会require这些模块。

综上可以发现:我们只将所有require到的包排除掉就可以了,这个模块对应的也就是package.json里dependencies下的模块。有关dependencies和devDependencies的区别要理解好。

因此我们可以使用externals-dependencies这个插件配合externals属性实现dependencies的排除工作。

代码:

const webpack = require('webpack');
const _externals = require('externals-dependencies')
module.exports = {
  ...
  externals: _externals(),
  ...
}

二:target指向node

官方文档:编译为类 Node.js 环境可用(使用 Node.js require 加载 chunk)

代码:

target: 'node',

三:增加node配置

官方文档:这些选项可以配置是否 polyfill 或 mock 某些 Node.js全局变量和模块。这可以使最初为 Node.js 环境编写的代码,在其他环境(如浏览器)中运行。

代码:

node: {
    console: true,
    global: true,
    process: true,
    Buffer: true,
    __filename: true,
    __dirname: true,
    setImmediate: true,
    path: true
},

四:babel配置

为了兼容低版本的node不原生支持async/await的问题。这里babel我使用了babel-preset-env{"modules": false}的配置。此配置会将es6语法转为es5语法,例如let、const转为var。

同时将所有的async/await函数也转成了polyfill里定义的_asyncToGenerator函数。

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

其实是使用promise实现了async函数的功能。

当然这个函数在运行时还需要regeneratorRuntime函数。所以我在全局引入了babel-polyfill来提供regeneratorRuntime函。

注:如果你的node版本很高且原生支持async/await,大可将babel-preset-env和babel-polyfill省略掉

代码:

const path = require('path');
const webpack = require('webpack');
const _externals = require('externals-dependencies')

module.exports = {
  entry: {
    app: [
      // 如果polyfill放在这里,打包的时候将不会被external,必须在js里require才能有效external
      // 'babel-polyfill',
      './src/index.js'
    ]
  },
  output: {
    path: path.resolve(__dirname),
    filename: '[name].js'
  },
  resolve: {
    extensions: [".js"]
  },
  target: 'node',
  externals: _externals(),
  context: __dirname,
  node: {
    console: true,
    global: true,
    process: true,
    Buffer: true,
    __filename: true,
    __dirname: true,
    setImmediate: true,
    path: true
  },
  module: {
    rules: [
      {
        test: /\.js/,
        use: ['babel-loader']
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    }),
  ]
}

部署

经过打包,部署的时候就方便多了,只需要将package.json、app.js、以及view里的html部署上线就好了。然后在服务器上执行

1. npm install
2. npm run for

然后server就后台运行了。如果需要更新发布,只需要本地重新npm run dev或npm run build打好包,拖到服务器覆盖app.js即可。

Javascript 相关文章推荐
js时间日期和毫秒的相互转换
Feb 22 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
Javascript中With语句用法实例
May 14 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
Vue组件化开发思考
Feb 02 #Javascript
微信小程序实现导航栏选项卡效果
Jun 19 #Javascript
解析Vue.js中的组件
Feb 02 #Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 #Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 #Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 #Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 #Javascript
You might like
PHP安全配置
2006/12/06 PHP
介绍php设计模式中的工厂模式
2008/06/12 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
jquery里的正则表达式说明
2011/08/03 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
在vue中封装可复用的组件方法
2018/03/01 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
Python中使用Inotify监控文件实例
2015/02/14 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
windows下python安装pip方法详解
2020/02/10 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
查看keras的默认backend实现方式
2020/06/19 Python
Python __slots__的使用方法
2020/11/15 Python
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
销售工作岗位职责
2013/12/24 职场文书
自荐信写法介绍
2014/01/25 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
个人综合鉴定材料
2014/05/23 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
了解Redis常见应用场景
2021/06/23 Redis
解决redis批量删除key值的问题
2022/03/23 Redis
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript