乐趣区

关于前端:用前端构建工具打包后端服务我到底经历什么

jiezi

用前端构建工具打包后端服务，我到底经验什么

看到这个 题目，是的，我本是个后端，最近要写点 node.js，之前写前端，晓得 npm build 一下，那么用 javascript 写的后端程序也要 npm build 吧，好的，作为个 gopher，带着对 javascript 的刻板印象就开干了。

我本 gopher，奈何没有一个会前端的老婆，就本人干前端了，如果干的不对，请及时纠正

我的项目背景

还是简略介绍下我的项目背景，屏幕前业余前端同学能够先猜猜这样干行还是不行，行的话，该怎么做。

这个程序运行的 node.js 端，提供一个简略的 http 服务，外部逻辑波及：

  1. toml2json
  2. curl-to-go
  3. toml-to-go
  4. toml2xml
  5. xml2json
  6. json2toml

这些逻辑，可用内建包能解决，有些依赖第三方包，例如：

  1. json2toml
  2. object-to-xml

还有些组件，未提交到 npm，也未做模块化解决，须要把代码找进去，独自解决，例如：

  1. curl-to-go
  2. toml-to-go

这些第三方包，感觉都是运行在前端环境的，（刚开始，我只是通过 npm 拉下来，也不晓得能不能运行在 node.js 上，npm 也没指明这些包在前后端 runtime 兼容性）当初我想用 webpack 将其所有的代码打包成一个 js 文件，并能运行在 node.js 环境，

好，问题和背景如上。

别说：node.js 打什么包！

开整

我面临如下问题：

  1. 如何引入前端 包
  2. 如何引入 未模块化革新的包
  3. 如何让 webpack 编译的成绩在 node.js 环境也能运行

对于第一个问题，首先得搞清楚在 Javascript 中 import 和 require 区别。

import 与 require 区别

require/exports 属于社区本人选举出的计划。import/export 属于是 ECMAScript 标准。

这里咱们用到了 webpack , 那么就得应用 import/export 作为代码引入语法。所以，对 curl-to-go 代码改一下，在最初新增：

function curlToGo(curl) {...}

+ export default curlToGo;

这样就解决了，各个 js 文件组合问题。

第二个问题，须要弄清楚，node.js 的包管理机制

node.js 模块

node.js 模块治理，用的是 require，因为我须要用 node.js 起一个 http 服务，须要应用 require 语句引入 http 模块。

但这还没完，webpack 是不能很好辨别，哪些是内部依赖，哪些是外部依赖。所以这里须要告知 webpack :

module.exports = {target: "node",}

第三个问题，那就随缘了，build 之后，run 一下试试咯。

最终 webpack 配置如下。

--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+var fs = require("fs")

 /*
  * 引入 ParallelUglifyPlugin 插件
@@ -13,9 +14,20 @@ const PATHS = {build: path.join(__dirname, 'build'),
 };

+var nodeModules = {};
+fs.readdirSync('node_modules')
+    .filter(function(x) {+        return ['.bin'].indexOf(x) === -1;
+    })
+    .forEach(function(mod) {+        nodeModules[mod] = 'commonjs' + mod;
+    });
+
 module.exports = {
     mode: 'development',
     devtool: false, // 编译成绩 保留换行
+    target: "node",
+    externals: nodeModules,
     entry: {entry: path.join(__dirname, 'src/index.js'),
     },

最初

又是折腾前端的一天，哦不，是好几天。

javascript 和 node.js 包都放在 npm 里，有点让人搞不清楚实用环境，当然，这次引入的包都没有调用底层 API，所以，没呈现兼容性问题。

import 和 require 傻傻分不清楚，CommonJS, ES6 和 ES5 各种规范算是给我好好上了一课。

好了，简略聊到这，不是太难的货色，只是表白一下一个刚入门前端的人碰到这些问题后的，“幸”路历程。

参考

  • https://zhuanlan.zhihu.com/p/…
  • https://sazzer.github.io/blog…
  • https://juejin.cn/post/689639…
  • https://zh.quish.tv/how-packa…
  • https://blog.anymelon.com/202…
  • https://www.zhihu.com/questio…
退出移动版