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

Question

我需要lodash-es在我的打字稿项目中使用，但我无法正确配置它，它总是报告错误，例如SyntaxError: Unexpected identifier

你好.ts

import upperCase from 'lodash-es/upperCase'

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

包.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 一起使用：如何正确配置 babel 以使用 lodash-es？. 由于我不确定他们是否有完全相同的原因，所以我在这里要求打字稿

score 10 · Accepted Answer

您可以从这里加载类型：

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

并像这样使用它：

import { camelCase } from "lodash-es"

score 3 · Accepted Answer

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

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"]
});

score 3 · Accepted Answer

ts-node.ts在加载文件时对其进行编译。它不接触.js文件；它们必须已经是 Node.js 可以理解的形式（例如，没有 ES6import语句），或者您必须使用单独的机制来转换它们，例如@babel/registerrequire 挂钩（本质上与使用的相同babel-node）。您仍然需要配置@babel/register不忽略node_modules，如另一个答案中所述。来自其他答案的建议只是使用lodash而不是lodash-es很好。

score 1 · Accepted Answer

实际上，你不应该使用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...

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

4 回答 4

Related

Reference