[Architecte (Partie 9)] Comment faire en sorte que l'environnement Node prenne en charge le module ES

Prenez l'habitude d'écrire ensemble ! C'est le troisième jour de ma participation au "Nuggets Daily New Plan · April Update Challenge", cliquez pour voir les détails de l'événement .

En savoir plus sur la modularité

Commonjs

• Chargez le module :require
• Module d'exportation :module.exports / exports.xxx

Module SE

• Chargez le module :import
• Module d'exportation :export default / export xxx

Analyse des points douloureux

Utiliser pour Commonjsexporter un moduleutils

// test-cli-0174\bin\utils.js
module.exports = function () {
  console.log('hello utils');
};
复制代码

Introduire des modules dans le fichier principal au moyen ES Modulede

// test-cli-0174\bin\index.js
#!/usr/bin/env node

import utils from './utils';

utils();
复制代码

Exécutez le programme et constatez qu'une erreur sera signalée Cannot use import statement outside a module, ce qui signifie que la importsyntaxe .

Alors, comment faire en sorte que l' Nodeenvironnement soutienneES Module ?

Utiliser WebPack

Installer le pack Web

npm i -D webpack webpack-cli
复制代码

Modifier le code

Le fichier principal utilise requirepour appeler webpackle construitcore.js

// test-cli-0174\bin\index.js
#!/usr/bin/env node
require('./dist/core');
复制代码

core.jsutiliser l' es moduleimportationutils.js

// test-cli-0174\bin\core.js
import utils from './utils';
utils();
复制代码

Configurer webpack.config.js

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './bin/core.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'core.js',
  },
  mode: 'development',
};
复制代码

Modifier le champ scripts de packag.json

  "scripts": {
    "build": "webpack",
    "dev": "webpack -w"
  },
复制代码

exécuter la construction

npm run build
复制代码

Une fois la compilation terminée, le distrépertoire et la compilationcore.js

Exécutez à nouveau le programme et constatez qu'il peut fonctionner normalement.

Vous pouvez démarrer l'état d'écoute et exécuter automatiquement le processus de construction lorsque le fichier change

npm run dev
复制代码

Prise en charge des bibliothèques intégrées Node via l'attribut cible webpack

Lorsque nous appelons nodela bibliothèque intégrée de , par exemple path、fs, la construction signalera une erreur, car la bibliothèque intégrée de l' environnement n'existe pas par défautwebpack , nous devons donc modifier la propriété en .webpackwebwebnodetargetnode

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './bin/core.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'core.js',
  },
  target: 'node', // 默认是web
};
复制代码

// test-cli-0174\bin\utils.js
import { pathExistsSync } from 'path-exists';

export function exists(p) {
  return pathExistsSync(p);
}
复制代码

// test-cli-0174\bin\core.js
import path from 'path';
import { exists } from './utils';

console.log(path.resolve('.'));
console.log(exists(path.resolve('.')));
复制代码

Exécutez le programme, il n'y a pas de problème.

Utilisez babel pour être compatible avec les versions inférieures de node

Installer les dépendances

npm i -D 
babel-loader
@babel/core 
@babel/preset-env 
@babel/plugin-transform-runtime 
@babel/runtime-corejs3
复制代码

configurerwebpack

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './bin/core.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'core.js',
  },
  mode: 'development',
  target: 'node', // 默认是web
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|dist)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              [
                '@babel/plugin-transform-runtime',
                {
                  corejs: 3,
                  regenerator: true,
                  useESModules: true,
                  helpers: true,
                },
              ],
            ],
          },
        },
      },
    ],
  },
};
复制代码

Comment le nœud prend en charge nativement le module ES

Le suffixe du nom de fichier doit être modifié .mjs, et une fois qu'il est utilisé mjs, tout le contenu doit être utilisé ES Moduleet ne peut pas être mélangé, sinon une erreur sera signalée.

// test-cli-0174\bin\index.mjs
#!/usr/bin/env node

import './core.mjs';
复制代码

// test-cli-0174\bin\core.mjs
import path from 'path';
import { exists } from './utils.mjs';

console.log(path.resolve('.'));
console.log(exists(path.resolve('.')));
复制代码

// test-cli-0174\bin\utils.js
import { pathExistsSync } from 'path-exists';

export function exists(p) {
  return pathExistsSync(p);
}
复制代码

Enfin, exécutez le programme avec une instruction

node --experimental-modules bin/index.mjs
// node14版本之后 不需要加 --experimental-modules 指令也可以
node bin/index.mjs
复制代码

Les mêmes résultats peuvent être obtenus, sans problème.

Si vous ne voulez pas changer le nom du suffixe en , vous pouvez spécifier le champ comme .mjsdans le package.jsonfichier .typemodule

{
   "type": "module"
}
复制代码

Une fois définis, les JSscripts sont interprétés comme des ES6modules.