在Babel中包含node_modules [英] Including node_modules in Babel

问题描述

我正在尝试 include 我的node_modules，以便Babel将它们与我的src文件一起转换.

I am trying to include my node_modules so that Babel transpiles them along with my src files.

其背景是这样的:我有一个带有多个软件包的monorepo，但是我不想为每个软件包都设置一个Webpack/Babel东西.所以我的想法是告诉我的主项目中的Webpack/Babel移植由我的源导入的node_modules.

The background of this is this: I have a monorepo with multiple packages, but I do not want to setup a Webpack/ Babel thing for every single package. So my idea was to tell Webpack/ Babel in my main project to transpile its node_modules that are imported by my sources.

为此，我需要这样做以告知Babel不要忽略我的node_modules:

I read for this I need to do this to tell Babel to not ignore my node_modules:

require('babel-register')({
  ignore: false
});

现在这给了我错误，因为有很多不是我的软件包，并且不能与Babel一起使用.但是我也可以告诉Babel仅包括特定的程序包，我这样做是这样的:

Now this gives me errors because there are a lot of packages that are not mine and that don't play along with Babel. But I can also tell Babel to only include specific packages, which I do like this:

require('babel-register')({
  only: /@elmc/
});

因为我的软件包位于@elmc/package-name下.这解决了上面的问题，但是现在我自己的软件包仍然不会被编译.我收到一条错误消息:

Because my packages are scoped under @elmc/package-name. This solves the issue above but now my own package still won't get transpiled. I get an error saying:

.- collection-browser/CollectionBrowser.js模块解析失败: 意外令牌(23:13)您可能需要适当的加载程序来处理 此文件类型.

.-collection-browser/CollectionBrowser.js Module parse failed: Unexpected token (23:13) You may need an appropriate loader to handle this file type.

|   render() {
|       return <div>asd</div>;
|   }

他似乎并没有翻译我的JSX，而是抛出了一个错误.我将babel-register调用放入了Webpack配置中.我从create-react-app获得了我的Webpack配置，所以它很长，但是这里是完整的:

He doesn't seem to transpile my JSX and instead throws an error. I put my babel-register call in my Webpack config. I got my Webpack config from create-react-app so it is quite lengthy, but here it is in its entirety:

https://gist.github.com/LukasBombach/fe84a563ec9268dee32204d429763d5b

推荐答案

好，我现在可以正常工作了，此注释对此进行了解释:

Ok I got it working now, this comment explained it:

https://github.com/lerna/lerna/issues/487 #issuecomment-302341620

1. 将resolve.symlinks设置为false.下一步需要这样做.
2. 添加 /@ foo/regex到使用的规则的include数组 巴别塔装载机.由于我们在上一版中关闭了符号链接解析 一点，monorepo的其他软件包将解析为 node_modules/@ foo/，而不是../.这是 在next.js问题中建议，所以我只是去看看它们如何 实现了它，并做了类似的事情.
3. 在以下位置更改node_modules resolve.modules到path.resolve(__ dirname，'node_modules'). 否则，webpack 2会尝试要求 本地链接包的node_modules.但这可能是因为我 使用file:../bar在package.json中指定它们，因为我不 将它们发布到任何地方.
4. 设置Jest以在@foo下转换文件 范围.这意味着添加"transformIgnorePatterns": ["/node_modules/(?！@ foo)"]为Jest的配置. facebook/jest#2550

1. Set resolve.symlinks to false. This is needed for the next step.
2. Add /@foo/ regex to the include array of the rule that uses babel-loader. Since we turned off symlinks resolving in the previous point, other packages from the monorepo are going to resolve to node_modules/@foo/, not ../. This was suggested in next.js issue, so I just went to see how they implemented it and did something similar.
3. Change node_modules in resolve.modules to path.resolve(__dirname, 'node_modules'). Otherwise webpack 2 tried to require dependencies from the node_modules of local linked packages. But that's probably because I use file:../bar for specifying them in package.json, as I don't publish them anywhere.
4. Set up Jest to transpile files under the @foo scope. This means adding "transformIgnorePatterns": ["/node_modules/(?!@foo)"] to Jest's configuration. facebook/jest#2550

但是，我不必执行第3步，这毕竟也不是很好，因为每次更改依赖项时，我都必须重新启动Webpack开发服务器.所以我想这个问题的答案是:这是怎么做，但是唯一可能的结果(此解决方案)效果不佳"

However, I had to not do step 3 and also this does not work quite well after all because I have to restart my Webpack dev server every time I make changes to my dependencies. So I guess the answer to this question is: "Here is how to do it, but it the only possible result (this solution) does not quite work"

这篇关于在Babel中包含node_modules的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！