使用 yarns 将包添加到自定义 @frontend_components 或 lib 文件夹答案

【问题标题】：Add packages to custom @frontend_components or lib folder using yarns使用 yarns 将包添加到自定义 @frontend_components 或 lib 文件夹
【发布时间】：2019-12-20 12:37:10
【问题描述】：

从bower to yarn 迁移并运行命令时

纱线安装

yarn 创建了@bower_components 文件夹，所有的凉亭/前端组件都添加到了这个文件夹中../node_modules/@bower_components

“依赖”：{
...
"@bower_components/bootstrap": "twbs/bootstrap#^3.3.7",
"@bower_components/jquery": "jquery/jquery-dist#^3.1.1",
"@bower_components/lodash": "lodash/lodash#^4.17.12",
"@bower_components/moment": "moment/moment#^2.19.1",
... }

如果，我需要创建从 @bower_components 迁移到 @frontend_components 或添加到 public/lib 文件夹。我该怎么做？

yarn --cwd /public/lib 添加 lodash

【问题讨论】：

标签： npm bower yarnpkg yarn-workspaces

【解决方案1】：

凉亭的工作方式是创建一个从/bower_components 到/node_modules/@bower_componets 的符号链接：

bower-away 通过解决所有依赖项来解决这个问题 Bower，并将它们全部添加到 package.json 然后，您的 package.json 文件包含 bower 依赖项：
{
  "dependencies": { 
     "@bower_components/bootstrap": "twbs/bootstrap#^3.3.7", 
     "@bower_components/jquery": "jquery/jquery-dist#^3.1.1", 
     "@bower_components/lodash": "lodash/lodash#^4.17.12", 
     "@bower_components/moment": "moment/moment#^2.19.1",
  }
}

这适用于大多数情况。但在你的情况下，符号链接不起作用。我遇到了同样的问题，我的解决方法是修改我的 express 服务器并将 /bower_components 前端资源映射到 /node_modules/@bower_components 后端资源，并使用以下行：

新的

app.use("/bower_components", express.static(path.join(__dirname, "/node_modules/@bower_components")));

原创

 //app.use("/bower_components", express.static(path.join(__dirname, "/bower_components")));

如果不是您的情况，您可能需要按照原作者的建议手动更新对新 node_modules/@bower_components 文件夹的前端引用：Adam Stankiewicz

但最初，代码中唯一需要的更改是更改任何使用 node_modules/@bower_components 引用 bower_components （尽管您可以在安装后脚本中将其链接到其他位置）。

【讨论】：

【解决方案2】：

我为解决此问题而实施的解决方法是引入一个简单的脚本并使用新密钥更新 package.json。

在 package.json 下（用于与前端一起工作所需的所有 UI 相关依赖项）

...
...
"scripts": {
    "postinstall": "node migrateUI.js"
  },
...
"uidependencies": {
...
"bootstrap": "^3.3.7"
"jquery": "^3.1.1",
"lodash": "*",
"moment": "^2.19.1",
...
},
"dependencies": {
....
"bootstrap": "^3.3.7"
"jquery": "^3.1.1",
"lodash": "*",
"moment": "^2.19.1",
....
}

migrateUI.js

const uipackage = require('./package.json');
const packageName = Object.keys(uipackage.uidependencies);
const dir = 'public/libs';

 //if the folder already exists, it ignores else creates.
if (!fs.existsSync(dir)) {
  fs.mkdirSync(dir);
}

for (let i = 0; i < packageName.length; i++) {
  const element = packageName[i];
  const source = path.resolve('node_modules/' + element);
  const target = path.resolve('public/libs/' + element); //custom lib folder to save all UI dependencies
  if (!fs.existsSync(target)) {
    fs.symlinkSync(source, target, 'dir', (err) => {
      if (err && err.code !== 'EEXIST') {
        console.log('Error creating dependecny symlink - ', err);
      } else {
        console.log('Symlink for dependency created');
      }
    });
  }
}

【讨论】：