1

当从bower 迁移到 yarn并运行命令时

纱线安装

yarn 创建了@bower_components 文件夹，所有的bower/前端组件都添加到了这个文件夹中../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

4

2 回答 2

0

bower-away 的工作方式是创建一个符号链接 from /bower_componentsto /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",
  }
}

这将在大多数情况下工作。但是在您的情况下，符号链接不起作用。我遇到了同样的问题，我的解决方法是修改我的快速服务器并使用以下行将/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 的任何引用（尽管您可以在安装后脚本中的其他位置链接它）。

于 2020-01-08T20:40:57.663 回答
0

我为解决此问题而实施的解决方法是引入一个简单的脚本并使用新密钥更新 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');
      }
    });
  }
}
于 2020-12-24T22:26:50.227 回答