nodejs ES6模块使用 以及 ES6代码转CJS兼容性处理 |
您所在的位置：网站首页 › nodejs引入模块 › nodejs ES6模块使用 以及 ES6代码转CJS兼容性处理 |
nodejs ES6模块使用 以及 ES6代码转CJS兼容性处理
|
本文已参与「新人创作礼」活动，一起开启掘金创作之路。 前言有些人平时编写模块时比较喜欢使用es6代码，但是如果我们想要编写一个属于自己的依赖包，要考虑他人的使用，有些人爱用es6模块，有些人仍保留commonjs的require导入。 希望自己的模块既能被es6形式import导入，也希望能同时兼容commonjs模块的require导入，我们在上传自己的npm包时就得考虑好这个问题。 本文介绍es6模块如何开启使用，并介绍如何使用babel或esbuild对es6模块进行兼容性转换。 第一种方案 ES6模块 创建项目新建文件夹，比如babel。 cd进项目文件夹位置，npm init -y 创建前端项目，会生成package.json文件。 $ npm init -y 复制代码 开启ES6模块在package.json中添加"type":"module"，即可开启该项目的es6模块，就可以在项目中的js模块中使用es6的import导入啦。 在项目下创建src文件夹，创建index.js，使用es6模块导出，并在test.js中导入使用。 // src/index.js const add = (a, b) => { return a + b } //请使用非默认导出，因为默认导出转为cjs上传npm后 //默认导出会等于使用非默认导出导出一个default属性，那你还不如自己声明是啥属性。 export {add} 复制代码 // src/test.js import {add} from './index.js' console.log(add(1, 2)) // 3 复制代码 兼容性处理首先我们清楚一点，就是编辑器允许你使用es6导入commonjs的，但是commonjs不支持导入es6的，也就意味着，我们在上传自己的npm包时，也就意味着我们需要将我们的es6项目转化为commonjs模块项目。 babel添加babel开发依赖。 $ npm i @babel/core @babel/cli @babel/preset-env -D 复制代码在项目根目录编写配置文件babel.config.json。 { "presets": [ [ "@babel/preset-env", { "targets": { "edge": "17", "firefox": "60", "chrome": "67", "safari": "11.1" }, "useBuiltIns": "usage", "corejs": "3.6.5" } ] ] } 复制代码我们将src下的test.js删除，执行打包命令，以下命令会将src下所有文件转化为es5代码，至于打包位置可以自定义，以下代码将打包至lib文件夹中。 $ npx babel src --out-dir lib 复制代码转化后的代码就可以打包上传至npm了，我们根据nodejs npm使用攻略（如何发布属于自己的npm包）上传。 注意，转化后的包可能会缺失一些新的需要的依赖，要记得在上传npm包前添加需要的新依赖。 上传之前 先在package.json中把name改一个不会重复的名字。 并把入口改成我们的lib/index.js。 最后把"type":"module"去掉，我们只是暂时使用es6模块，在上传之后你的模块理应是cjs。然后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 复制代码 第二种方案（esbuild） 使用TypeScript编写代码，全部使用ts文件编写，ts自动支持es模块的导入导出语法。 问题就是ts文件是不能直接运行的，于是我们需要编写完将它转化为js。 esbuild使用esbuild不仅可以将 ts 转化为 js，还可以将 ES6 代码转为 CJS 兼容。 $ npm i esbuild -D 复制代码在 package.json 添加 build 命令 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "esbuild src/index.ts --bundle --outdir=lib --platform=node" }, 复制代码运行打包，编译出来的 lib/index.js 就可以直接使用了 $ npm run build 复制代码将 package.json 的入口 main 改为我们编译后的文件。 然后就可以上传npm包了。 尾言如果觉得文章还不错的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~ |
【本文地址】
今日新闻 |
推荐新闻 |