用前端構建工具打包後端服務，我到底經歷什麼

看到這個標題，是的，我本是個後端，最近要寫點 node.js，之前寫前端，知道 npm build 一下，那麼用 javascript 寫的後端程式也要 npm build 吧，好的，作為個 gopher ，帶著對 javascript 的刻板印象就開幹了。

我本 gopher，奈何沒有一個會前端的老婆，就自己幹前端了，如果幹的不對，請及時糾正

專案背景

還是簡單介紹下專案背景，螢幕前專業前端同學可以先猜猜這樣幹行還是不行，行的話，該怎麼做。

這個程式執行的 node.js 端，提供一個簡單的 http 服務，內部邏輯涉及：

toml2json
curl-to-go
toml-to-go
toml2xml
xml2json
json2toml

這些邏輯，可用內建包能解決，有些依賴第三方包，例如：

還有些元件，未提交到npm，也未做模組化處理，需要把程式碼找出來，單獨處理，例如：

這些第三方包，感覺都是執行在前端環境的，（剛開始，我只是通過npm拉下來，也不知道能不能執行在 node.js 上，npm 也沒指明這些包在前後端 runtime 相容性）現在我想用 webpack 將其所有的程式碼打包成一個 js 檔案，並能執行在 node.js 環境，

好，問題和背景如上。

別說：node.js 打什麼包！

鍾薛高你還要不要

開整

我面臨如下問題：

如何引入前端包
如何引入未模組化改造的包
如何讓 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 各種標準算是給我好好上了一課。

好了，簡單聊到這，不是太難的東西，只是表達一下一個剛入門前端的人碰到這些問題後的，“幸”路歷程。

用前端構建工具打包後端服務，我到底經歷什麼