如何在打字稿中正确使用 lodash-es?
Posted
技术标签:
【中文标题】如何在打字稿中正确使用 lodash-es?【英文标题】:How to use lodash-es in typescript correctly? 【发布时间】:2019-03-21 23:21:00 【问题描述】:我需要在我的打字稿项目中使用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?。由于我不确定他们有完全相同的原因,所以我在这里要求打字稿
【问题讨论】:
【参考方案1】:你可以从here加载类型:
npm install --save-dev @types/lodash-es
并像这样使用它:
import camelCase from "lodash-es"
【讨论】:
【参考方案2】:我刚遇到这个,这对我有用:
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"]
);
【讨论】:
请注意,在next-transpile-modules
的当前版本中,它只是withTM(['lodash-es'])
【参考方案3】:
实际上,你不应该使用lodash-es
,而是使用lodash
,因为lodash-es
是esm
模块,而lodash
是我们正式的commonjs
模块。
但是如果你想在节点中使用lodash-es
,你应该使用esm
而不是@babel/register
。即使我添加了babel-plugin-lodash
或dynamic-import
插件或@babel/plugin-transform-modules-commonjs
、@babel/polyfill
等,我也发现@babel/register
非常错误......
【讨论】:
【参考方案4】:ts-node
在加载时编译 .ts
文件。它不会触及.js
文件;它们必须已经是 Node.js 可以理解的形式(例如,没有 ES6 import
语句),或者您必须使用单独的机制来转换它们,例如 @babel/register
require hook(本质上与 @ 使用的相同) 987654328@)。您仍然需要配置@babel/register
以不忽略node_modules
,如other answer 中所述。另一个答案的建议是只使用 lodash
而不是 lodash-es
很好。
【讨论】:
以上是关于如何在打字稿中正确使用 lodash-es?的主要内容,如果未能解决你的问题,请参考以下文章