使用纱线将包添加到自定义@frontend_components 或 lib 文件夹

Question

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

yarn install

yarn 创建了@bower_components 文件夹，所有 bower/front-end 组件都添加到该文件夹中 ../node_modules/@bower_components

"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 迁移到@frontend_components 或添加到public/lib 文件夹。我该怎么做？

yarn --cwd /public/lib add lodash

Answer 1

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

bower-away gets away with this by resolving all dependencies with Bower, and adding all of them flattened to package.json Then, your package.json file with contain bower dependencies as:
{
  "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

But initially, the only change required in code is to change any reference to bower_components with node_modules/@bower_components (though you can link it somewhere else in postinstall script).

Answer 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');
      }
    });
  }
}

使用纱线将包添加到自定义@frontend_components 或 lib 文件夹

Add packages to custom @frontend_components or lib folder using yarns

npm

bower

yarnpkg

yarn-workspaces