如何在打字稿中正确使用lodash-es？

Question

我的typescript项目中需要用到lodash-es，但是配置不正确，总是报SyntaxError: Unexpected identifier

这样的错误

hello.ts

import upperCase from 'lodash-es/upperCase'

console.log('Hello ' + upperCase('typescript') + '!');

package.json

{
  "scripts": {
    "demo": "ts-node hello.ts"
  },
  "dependencies": {
    "lodash-es": "4.17.11"
  },
  "devDependencies": {
    "@types/lodash-es": "4.17.1",
    "ts-node": "7.0.0",
    "typescript": "3.0.1"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs"
  }
}

当运行 ts-node hello.ts时，报错如下：

/typescript-use-lodash-es-demo/node_modules/lodash-es/upperCase.js:1
    (function (exports, require, module, __filename, __dirname) { import createCompounder from './_createCompounder.js';
                                                                         ^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier
        at new Script (vm.js:79:7)
        at createScript (vm.js:251:10)

我也针对这个问题做了一个小demo，有需要的可以clone试试：https://github.com/freewind-demos/typescript-use-lodash-es-demo

一个相关的问题是将 lodash-es 与 babel 一起使用：How to configure babel correctly to use lodash-es?。由于我不确定他们有完全相同的原因，所以我在这里要求打字稿

Answer 1

ts-node 在加载文件时编译 .ts 文件。它不涉及 .js 个文件；它们必须已经是 Node.js 可以理解的形式（例如，没有 ES6 import 语句）或者您必须使用单独的机制来转换它们，例如 @babel/register require hook (essentially the same thing that is used by babel-node). You would still need to configure @babel/register not to ignore node_modules, as described in the other answer。另一个答案的建议是只使用 lodash 而不是 lodash-es 是好的。

Answer 2

实际上，你不应该使用lodash-es，而应该使用lodash，因为lodash-es是esm模块，而lodash是我们正式的commonjs模块。

但是如果你想在节点中使用 lodash-es，你应该使用 esm 而不是 @babel/register。我发现 @babel/register 非常有问题，即使我添加了 babel-plugin-lodash 或 dynamic-import 插件或 @babel/plugin-transform-modules-commonjs、@babel/polyfill 等...

Answer 3

我只是运行喜欢这个，这对我有用：

import { upperCase } from 'lodash-es'; // works :)
import upperCase from 'lodash-es/upperCase'; // broken :(

[编辑]

所以我刚刚重新启动了我的应用程序，现在它不再工作了，我也没有进行任何配置更改。厉害了。

[编辑 2]

我发现问题可能在于 lodash-es 模块没有被 t运行 spiled out of the box，你需要告诉 Webpack 或 Babel 这样做。这是一个博客 post，提供了一些很好的见解：https://medium.com/@martin_hotell/tree-shake-lodash-with-webpack-jest-and-typescript-2734fa13b5cd。如果您正在使用 Jest，本文还介绍了如何解决 Jest 的问题。

如果您使用的是 NextJS，则可以使用 https://github.com/martpie/next-transpile-modules

// next.config.js
const withTM = require("next-transpile-modules");

module.exports = withTM({
  transpileModules: ["lodash-es"]
});

Answer 4

您可以从 here:

加载类型

npm install --save-dev @types/lodash-es

并像这样使用它：

import { camelCase } from "lodash-es"

如何在打字稿中正确使用lodash-es？

How to use lodash-es in typescript correctly?

typescript

lodash

ts-node