javascript - 如何允许将 ES5 和 ES6 导入我的 npm 包？

Question

我是 npmjs 包发布的新手，最近成功发布了我的第一个包。但由于它是用 ES5 风格编写的。它只能通过“require”访问

const smiley = require('smiley-id');

应该怎么做才能使其也可以通过 import 语句访问？像这样

import smiley from 'smiley-id'; 

或/和

import { smileyId } from 'smiley-id';

Answer 1

require 是 CommonJS 模块系统(也称为 cjs 模块)的一部分，而 import 和 export用于 es2015 模块系统(也称为 JavaScript 模块、es6 模块或 esm 模块)。

您可以对cjs 和esm 模块使用import，但不能对 使用require >esm 模块。这意味着在 esm 模块(或您将使用 Typescript tsc 或 Babel 或与 Webpack 捆绑在一起编译的源文件)中，您已经可以按原样导入您的包，使用导入。但是，您不能使用命名导入。相反，您必须在之后解构导入的项目。

如果您想将其作为 esm 包分发，这也是可能的，并且它具有一些优势，其中最重要的是与 tree-shaking 相关。要将其作为 esm 模块分发，您需要告诉构建工具输出 esm 模块。这对于不同的工具是不同的。例如，对于 tsc，您指定 --module es6(有多个输出 esm 模块的目标)。对于 Webpack、Babel 和 Rollup，过程是不同的。