看到這個 標題，是的，我本是個後端，最近要寫點 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 各種標準算是給我好好上了一課。
好了，簡單聊到這，不是太難的東西，只是表達一下一個剛入門前端的人碰到這些問題後的，“幸”路歷程。
參考
- zhuanlan.zhihu.com/p/28483358
- sazzer.github.io/blog/2015/05/12/J...
- juejin.cn/post/6896397110078504973
- zh.quish.tv/how-package-nodejs-app...
- blog.anymelon.com/2020/05-22-nodej...
- www.zhihu.com/question/56820346
本作品採用《CC 協議》，轉載必須註明作者和本文連結