Question

我需要在我的打字稿项目中使用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)

我也为此问题设置了一个小型演示，您可以根据需要克隆并尝试：https://github.com/freewind-demos/typescript-use-lodash-es-demo

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

Answer 1

您可以从here加载类型：

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

并像这样使用它：

import { camelCase } from "lodash-es"

Answer 2

ts-node在加载.ts文件时对其进行编译。它不会触摸.js个文件；或者它们必须已经是Node.js可以理解的形式（例如，没有ES6 import语句），或者您必须使用单独的机制来转换它们，例如@babel/register require hook（实际上与由babel-node使用）。如other answer中所述，您仍然需要配置@babel/register使其不忽略node_modules。另一个答案的建议是仅使用lodash而不是lodash-es。

Answer 3

实际上，您不应使用tsc --init experimentalDecorators=true，而应使用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的问题非常严重。

Answer 4

我刚遇到这个问题，这对我有用：

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

[编辑]

因此，我刚刚重新启动了应用程序，现在它不再起作用，并且没有进行任何配置更改。很棒。

[编辑2]

我发现问题可能出在lodash-es模块没有直接翻译出来的情况下，您需要告诉Webpack或Babel这样做。这是一篇博客文章，提供了一些很好的见解：https://medium.com/@martin_hotell/tree-shake-lodash-with-webpack-jest-and-typescript-2734fa13b5cd。本文还介绍了使用Jest时如何解决该问题。

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

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

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

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

4 个答案: