使用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 相关文章推荐
Javascript 写的简单进度条控件
Jan 22 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 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代码
2010/02/16 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
php表单敏感字符过滤类
2014/12/08 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
许愿墙中用到的函数
2006/10/07 Javascript
两个DIV等高的JS的实现代码
2007/12/23 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
Vue异步加载about组件
2017/10/31 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
解决python 文本过滤和清理问题
2019/08/28 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
办公室经理岗位职责
2014/01/01 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
机电一体化职业规划书
2014/01/07 职场文书
生物工程专业求职信
2014/09/03 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
2015教师年度考核评语
2015/03/25 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android