请问是否是在typescript项目编写的时候使用了nodejs的fs模块，那么打包dist为esm模块之后，就实际不能在前端使用（比如：react/vue使用这个打包后的库）？

Question

在使用TypeScript 开发一个项目的时候：
1、我们是可以既使用import 引入三方库，也可以使用require引入三方库是吗？

1）这个是否是叫做esm和cjs的模块化引入？
2）import和require是否可以一起在项目中使用？
3）是需要在哪里配置什么才能使用吗？

2、然后在build的时候，打包到dist内，可以打包esm，也可以打包cjs是吗？
1）请问是否是在typescript项目编写的时候使用了nodejs的fs模块，那么打包dist为esm模块之后，就实际不能在前端使用（比如：react/vue使用这个打包后的库）？

Answer 1

Javascript 中第三方库有两种类型，分别是 ES Module 和 CommonJS Module。

1. ESM 需要通过 import 导入，而 CJS 需要通过 require 导入。使用那种方式导入取决于库打包后产物的类型，一般第三方库两种类型的产物都提供。
2. import 和 require 可以一起使用，但是需要打包工具的额外处理，而且不推荐这样做。一般统一使用 import。
3. 这取决于你使用的打包工具（Webpack、Vite 等）。一般情况下，这些打包工具是开箱即用的，你无需考虑这些问题。

---

1. 是的，你可以选择打包为 ESM 或是 CJS，一般情况下，如果你在开发第三方库的话，会选择同时提供两种类型的产物。
2. 是的，在前端（浏览器）中你无法使用 NodeJS 的模块，例如 fs。

Answer 2

一般来说,在使用TypeScript开发项目的时候,会通过2个构建步骤,

一、 通过tsc进行编译,将ts代码转换成js代码
二、 通过webpack等进行编译,将js代码中的模块化引入转换成浏览器能识别方式,但如果你的项目是为了在nodejs中运行的,可能就不需要这一步

• 1. Q: 对于任意一个三方库,是否能随意使用import/require进行引入
     A: 准确的答案是不能,但是,

     • 考虑到三方库在构建发布的过程中,可能会使用构建工具添加如下代码,这样,你就能随意使用import/require对这个第三方库进行引入了

       // 代码内容
       const myFunction = () => {
         console.log('This is a function');
       };
       
       // 检测当前环境并导出
       if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
         // CommonJS 导出
         module.exports = {
             myFunction
         };
       } else {
         // ES Module 导出
         export { myFunction };
       }

• 1.1 Q: 这个是否是叫做esm和cjs的模块化引入？
  A:

   - `reuire('path/to/module')` 属于 CommonJS 模块规范。
   - `import some module from 'path/to/module'` 属于 ES Module 模块规范。
  

• 1.2 Q: import和require是否可以一起在项目中使用？
  A: 可以,但是不建议,因为会导致代码风格混乱

• 1.3 Q: 是需要在哪里配置什么才能使用吗？
  A: 在 tsconfig.json 文件中设置以下选项,以下选项会将import/require构建成js代码时,变成CommonJS模块规范

    {
       "compilerOptions": {
           "module": "commonjs",
           "esModuleInterop": true,
           "allowSyntheticDefaultImports": true
       }
    }

  ---

• 2. Q: 在build的时候，打包到dist内，可以打包esm，也可以打包cjs是吗？
     A: 可以，看你的构建选项,CommonJS模块规范已经在上面例举了,下面例举ES Module 模块规范

     • tsconfig.json

         {
           "compilerOptions": {
               "module": "ESNext", 
               "target": "ESNext", 
               "esModuleInterop": true, 
               "moduleResolution": "node" 
           }
         }

     • webpack配置方式

         webpack({
           output: {
               libraryTarget: 'commonjs2', // 指定输出为 CommonJS 规范
               library: {
                   type: 'module', // 指定输出为 ES Module 规范
               }
           }
         })

• 2.1 Q: 请问是否是在typescript项目编写的时候使用了nodejs的fs模块，那么打包dist为esm模块之后，就实际不能在前端使用
  A: 使用CommonJS 规范和ES Module 规范构建项目无法决定这个代码是否能在nodejs/浏览器中运行,

   决定代码是否能在nodejs/浏览器运行的本质是在于你使用的api是否支持在对应的运行环境中使用,
   如,nodejs的fs模块中,`fs.readFile`在浏览器中根本不支持,
   如,docuemnt在nodejs中,根本没这个对象,
   至于因为`CommonJS 规范`或`ES Module 规范`导致在浏览器中报错的问题,
   可以使用`webpack`等构建工具,转换成浏览器能识别的形式
  

---

更新回答

考虑简单点的情况,浏览器不支持CommonJS 规范的require或ES Module 规范的import,所以,

• 直接写require会提示require不是一个函数,因为浏览器的运行环境里,没有定义过require这个函数
• 直接写import会提示语法错误,因为在浏览器上并没有import的这个语法,

当你使用合适的webpack配置对项目代码进行编译时,
你写的require/import会转换成如下形式,所以你通过CommonJS 规范或ES Module 规范的代码,就能在浏览器运行了

---

1. 源代码

   // src/index.js
   const myModule = require('./myModule');
   myModule.sayHello();
   
   // src/myModule.js
   module.exports = {
    sayHello: function() {
        console.log('Hello, World!');
    }
   };

2. 通过webpack编译后的代码

   // Webpack 在打包后生成的代码结构
   
   // 这是一个自执行的函数，用于模拟 CommonJS 规范中的模块加载机制
   (function(modules) {
    // Webpack 自己的 require 实现
    function __webpack_require__(moduleId) {
        // 缓存模块
        var module = {
            exports: {}
        };
   
        // 执行模块函数
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
   
        // 返回模块的导出内容
        return module.exports;
    }
   
    // 加载入口模块并返回其导出内容
    return __webpack_require__(0);
   })([
    // 这里是打包后的模块数组，每个模块对应一个函数
    /* 0: src/index.js */
    function(module, exports, __webpack_require__) {
        const myModule = __webpack_require__(1); // 加载模块 1
        myModule.sayHello();
    },
    /* 1: src/myModule.js */
    function(module, exports) {
        module.exports = {
            sayHello: function() {
                console.log('Hello, World!');
            }
        };
    }
   ]);

---

另外,现在较新版本的chrome等浏览器,已经支持import/export相关语法,但是仍然和实际期望有些差距,所以还是建议将需要在浏览器中运行的js代码,通过合适的webpack或其他构建工具配置,编译成浏览器能理解的js代码