This article has participated in the "Newcomer Creation Ceremony" event to start the road of gold creation together.

foreword

Some people prefer to use es6 code when writing modules, but if we want to write a dependency package of our own, we must consider the use of others. Some people like to use es6 modules, and some people still keep the require import of commonjs.

I hope that my modules can be imported by es6 import, and also compatible with the require import of commonjs modules. We have to consider this issue when uploading our own npm packages.

This article describes how to enable the use of es6 modules, and how to use babel to convert es6 modules for compatibility.

ES6 modules

Create project

Create a new folder, such as babel.

cd into the project folder location, npm init -ycreate a front-end project, and the package.jsonfile will be generated.

npm init -y
复制代码

Enable ES6 modules

If package.jsonyou add it in "type":"module", you can open the es6 module of the project, and you can use the import of es6 in the js module in the project.

test

Create a src folder under the project, create index.js, export using es6 module, and test.jsimport using in.

// src/index.js
const add = (a, b) => {
    return a + b
}

//请使用非默认导出，因为默认导出转为es5兼容上传npm后
//默认导出会等于使用非默认导出导出一个default属性，那你还不如自己声明是啥属性。
export {add} 
复制代码

// src/test.js
import {add} from './index.js'

console.log(add(1, 2)) // 3
复制代码

Compatibility Handling

First of all, let's be clear that es6 import is backward compatible with commonjs import, but commonjs does not support es6, which means that when we upload our own npm package, it means that we need to convert our es6 project into es5 (aka commonjs module) project .

babel

Add babel development dependencies.

npm i @babel/core @babel/cli @babel/preset-env -D
复制代码

Write a configuration file in the project root directory babel.config.json.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}
复制代码

We delete under src test.jsand execute the packaging command. The following command will convert srcall the files below into es5 code. As for the packaging location, you can customize the packaging. The following code will be packaged into the libfolder.

npx babel src --out-dir lib
复制代码

转化后的代码就可以打包上传至npm了，我们根据npm使用攻略上传。

注意，转化后的包可能会缺失一些新的需要的依赖，要记得在上传npm包前添加需要的新依赖。

上传之前

先在package.json中把name改一个不会重复的名字。
并把入口改成我们的lib/index.js。
最后把"type":"module"去掉。

然后npm导入自己命名的包

npm i babel-test-xxx
复制代码

使用es6模块开发项目的人，可以在新的项目里package.json中添加"type":"module"来使用它。

import {add} from 'babel-test-xxx'

console.log(add(1, 2)) // 3
复制代码

使用commonjs模块开发项目的人，可以直接require导入使用

const {add} = require('babel-test-xxx')

console.log(add(1, 2)) // 3
复制代码

尾言

如果觉得文章还不错的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~

Nodejs ES6 module usage and ES6 code to ES5 compatibility processing