Packaging back-end services with front-end build tools, what exactly did I experience

When I saw this title, yes, I was originally a back-end, and I want to write node.js , I wrote the front-end before, I know npm build , then use javascript to write The back-end program should also be npm build , well, as a gopher , with the stereotype of javascript, I started working.

I'm a gopher, but I don't have a front-end wife, so I do the front-end myself. If I'm doing something wrong, please correct it in time

Background of the project

Let’s briefly introduce the background of the project. Professional front-end students in front of the screen can first guess whether it will work or not, and if so, how to do it.

The node.js side of this program runs, providing a simple http service, and the internal logic involves:

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

These logics can be solved by built-in packages, and some rely on third-party packages, such as:

There are also some components that have not been submitted to npm and have not been modularized. The code needs to be found out and processed separately, for example:

These third-party packages seem to be running in the front-end environment (at the beginning, I just pulled them down through npm, and I don't know if they can run on node.js, and npm did not specify the runtime compatibility of these packages in the front-end and back-end) Now I want to use webpack to package all its code into a js file and run it in node.js environment,

OK, question and background as above.

Don't say: what package does node.js pack!

钟薛高你还要不要

open up

I am facing the following problem:

How to import front-end packages
How to import unmodularized packages
How to make the results compiled by webpack run in the node.js environment

Regarding the first question, we must first clarify the difference between import and require Javascript in ---66c0c38cbc39dadd7a52e7c2e7b8ae5b---.

The difference between import and require

require/exports belongs to the plan elected by the community itself. import/export belongs to the ECMAScript specification.

Here we use webpack , then we have to use import/export as the code introduction syntax. So, yes curl-to-go change the code and add it at the end:

 function curlToGo(curl) {
...
}

+ export default curlToGo;

This solves the problem of combining each js file.

The second question needs to be clarified, the package management mechanism of node.js

node.js modules

node.js模块管理，用的是require ， node.js http服务， require --Statement import require http module.

But this is not over yet, webpack is not very good at distinguishing which are external dependencies and which are internal dependencies. So here you need to tell webpack:

 module.exports = {

    target: "node", 
    
    }

The third question, then it's a matter of build . After ---4ca3856d7dbb84c15c27b7b35e397d04---, run give it a try.

The final webpack is configured as follows.

 --- 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'),
     },

at last

Another day of tossing the front end, oh no, several days.

Both javascript and node.js packages are placed in npm, which is a bit confusing for the applicable environment. Of course, the packages introduced this time do not call the underlying API, so there is no compatibility problem.

import require分不清楚， CommonJS , ES6 ES5给我Good lesson.

Well, it's not too difficult to talk about this briefly, just to express the "fortunate" journey of a person who is just getting started with these problems after encountering these problems.

Packaging back-end services with front-end build tools, what exactly did I experience