- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个使用 lerna 的项目( monorepo,多个包)。很少有软件包是独立的应用程序。
我想要实现的是在几个包上使用别名来实现依赖注入(inject)之类的功能。例如,我有别名 @package1/backendProvider/useCheckout
,在我的独立应用程序的 webpack 中,我将其解析为 ../../API/REST/useCheckout
。因此,当我将后端提供程序更改为其他内容时,我只会在 webpack 中更改它。
当其他软件包(不是独立应用程序)使用此别名时,就会出现问题。例如:
目录结构如下:
Project
packageA
ComponentA
packageB
API
REST
useCheckout
standalone app
组件A在包A中
useCheckout 位于 /API/REST/useCheckout
路径下的 packageB
ComponentA 使用 useCheckout
以及类似 import useCheckout from '@packageA/backendProvider/useCheckout
独立应用程序使用组件A
我得到的错误是找不到模块:无法解析'@packageA/backendProvider/useCheckout
但是,当在独立应用程序(具有带有下面提供的配置的 webpack)中使用相同的别名时,它可以正常工作。仅当依赖项出现问题时。
我知道一种解决方案是使用 webpack 编译每个包 - 但这看起来并不友好。我认为可行的是告诉 webpack 将这些别名解析为目录路径,然后重新编译它。第一部分(解析别名)已完成。
当我使用 NextJS 时,我的 webpack 配置如下所示:
webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
// Fixes npm packages that depend on `fs` module
config.node = {
fs: "empty"
};
const aliases = {
...
"@package1/backendProvider": "../../API/REST/"
};
Object.keys(aliases).forEach(alias => {
config.module.rules.push({
test: /\.(js|jsx)$/,
include: [path.resolve(__dirname, aliases[alias])],
use: [defaultLoaders.babel]
});
config.resolve.alias[alias] = path.resolve(__dirname, aliases[alias]);
});
return config;
}
最佳答案
您不需要使用别名。我有一个类似的设置,只需切换到yarn(v1)工作区,它有一个非常聪明的技巧,它将符号链接(symbolic link)添加到根node_modules中的所有包。
这样,每个包都可以毫无问题地导入其他包。
为了使用 lerna 应用 yarn 工作区:
// lerna.json
{
"npmClient": "yarn",
"useWorkspaces": true,
"packages": [
"packages/**"
],
}
// package.json
{
...
"private": true,
"workspaces": [
"packages/*",
]
...
}
这将启用带有lerna的yarn工作空间。
唯一需要解决的问题是让消费者包转译所需的包(因为 babel 和 webpack 的默认配置是忽略 node_module 转译)。
在 Next.js 项目中这很简单,使用 next-transpile-modules .
// next.config.js
const withTM = require('next-transpile-modules')(['somemodule', 'and-another']); // pass the modules you would like to see transpiled
module.exports = withTM();
在使用 webpack 的其他包中,您需要指示 webpack 转译您使用的包(假设它们位于 @somescope/
的 npm 范围内)。
例如,为了转译 typescript ,您可以添加额外的模块加载器。
// webpack.config.js
{
...
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
include: /[\\/]node_modules[\\/]@somescope[\\/]/, // <-- instruct to transpile ts files from this path
options: {
allowTsInNodeModules: true, // <- this a specific option of ts-loader
transpileOnly: isDevelopment,
compilerOptions: {
module: 'commonjs',
noEmit: false,
},
},
}
]
}
...
resolve: {
symlinks: false, // <-- important
}
}
如果您有 css,则还需要添加 css 部分。
希望这有帮助。
额外的优势,yarn 工作区将减少您的 node_modules
大小,因为它会安装一次重复的包(具有相同的 semver 版本)!
关于javascript - Webpack 解析别名并在该别名下编译文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61233457/
是否有任何库或框架旨在促进从另一种成熟的编程语言中构建项目? 在 C++、java 等编程语言中指定逻辑、集合和复杂规则非常容易,但在 Makefile 中完成这些事情似乎是一场艰苦的战斗。我还没有深
我有这段代码可以用 clang 编译得很好(即使使用 -Weverything),但是 gcc 会发出错误。 #include #include #include using namespace
我有以下 block 头文件 BKE_mesh.h: /* Connectivity data */ typedef struct IndexNode { struct IndexNode *
我在我的一个项目中遇到了一个奇怪的问题。我的代码库依赖于一个外部库,其中包含一个名为 Dataset 的类. Dataset类私有(private)继承自 std::vector (其中 Sample
当使用 gcc、g++ 或 make 在终端中编译一个小型 C 或 C++ 项目时,我收到以下错误: /tmp/ccG1caGi.o: In function `main': main.c:(.tex
我正在尝试从 CVS 为 Windows 上的 Emacs 23.1.50 编译 CEDET,但在“第 6 步:打开 EDE...”时出现错误:“defvar:作为变量的符号值是无效的:cedet-m
我正在(重新)学习编程,我从 C 开始。我的 IDE(如果我可以这么说)是 Windows7 上的 cygwin(32 位)和 Visual-Studio 2010。我总是编译我用 gcc (cygw
我喜欢在模板类中使用本地类来执行类似“static if”的构造。但是我遇到了 gcc 4.8 不想编译我的代码的问题。但是 4.7 可以。 这个例子: #include #include #in
我有一个项目,必须仅使用 java 1.4 进行编译。但我计划使用mockito 编写一些单元测试。我想要一种在 pom 中指定的方法,以便 src/main/java 使用 jdk 1.4 编译,但
我想了解 PHP 编译过程是如何工作的。 假设我有一个名为funcs.php 的文件并且这个文件有三个函数,如果我include 或require 它,所有的在文件加载期间编译三个函数?或者源代码会被
编译工具链 我们写程序的时候用的都是集成开发环境 (IDE: Integrated Development Environment),集成开发环境可以极大地方便我们程序员编写程序,但是配置起来
当我编写一些 Scala 代码时,在尝试编译代码时收到一条奇怪的错误消息。我将代码分解为一个更简单的代码(从语义的角度来看这完全没有意义,但仍然显示了错误)。 scala> :paste // Ent
我正在编译一个 SCSS 文件,它似乎删除了我的评论。我可以使用什么命令来保留所有评论? >SASS input.scss output.css 我在 SCSS 中看到两种类型的注释。 // Comm
这是我的代码: #include typedef struct { const char *description; float value; int age; } swag
当您编译 grails war 时,我知道 .groovy 代码被编译为字节码类文件,但我不明白容器(例如 tomcat)如何在请求 GSP 时知道如何编译它们。容器了解 GSP 吗?安装在服务器上的
我正在努力将多个文件编译成一个通用程序。我收到一个错误: undefined reference to 'pi' 这是我的代码和 Makefile 的框架。我做错了什么?谢谢! 文件:calcPi.c
我尝试使用 LD_PRELOAD 来 Hook sprintf function ,所以我将打印到缓冲区的结果: #define _GNU_SOURCE #include #include int
我正在寻找最简单的方法来自动将 CoffeeScript 重新编译为 JS。 阅读documentation但仍然很难得到我想要的东西。 我需要它来监视文件夹 src/ 中的任何 *.coffee 文
我想使用定制waveformjs 。我发现this on SO但是,我不知道如何编译/安装波形来开始。我从 GitHub 克隆它并进行了更改,但是我不知道如何将其转换为 .js 文件。 最佳答案 为了
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我是一名优秀的程序员,十分优秀!