Bower To Yarn

The following document is to guide developer through the steps taken to move dependencies of UP Shop project from bower to npm and is just for reference purpose. Few of the bower components are still in use as they don't comply with the npm standard.

copy-webpack-plugin with webpack configurations to complete this task.

step 1

Create assets.js file in the main project folder exporting list of bower packages name that is now using the npm.

const assets = [
  'morphext',
  'algoliasearch',
  'bootstrap',
  'desandro-matches-selector',
  'fizzy-ui-utils',
  'font-awesome',
  'get-size',
  'isotope-layout',
  'jasny-bootstrap',
  'jquery',
  'jquery-countto',
  'jquery-knob',
  'jquery-countdown',
  'magnific-popup',
  'masonry-layout',
  'material-design-icons',
  'open-sans-fontface',
  'outlayer',
  'sharrre',
  'smoothscroll-for-websites',
  'vide',
  'animate.css',
  'jquery.browser'
];

module.exports = [...assets];

step 2

package.json is modified to our npm needs.

"dependencies": {
    "@bower_components/algolia-autocomplete.js": "algolia/autocomplete.js#^0.27.0",
    "@bower_components/babel": "Micua/babel#^5.8.38",
    "@bower_components/ev-emitter": "metafizzy/ev-emitter#^1.0.0",
    "@bower_components/owl.carousel": "OwlCarousel2/OwlCarousel2#^2.2.0",
    "@bower_components/parallax": "alisamar/parallax#^1.1.3",
    "@bower_components/rs-plugin": "ueqt/bower-rs-plugin#*",
    "@bower_components/jquery-validation": "ikajou/jquery-validation#^1.13.0",
    "@bower_components/jquery.appear": "aliirz/jquery.appear#*",
    "@bower_components/modernizr": "Modernizr/Modernizr#2.8.3",
    "@bower_components/toastr": "johnpapa/toastr-bower#^2.1.3",
    "animate.css": "3.2.5",
    "jquery.browser": "0.1.0",
    "morphext": "2.4.7",
    "algoliasearch": "3.22.1",
    "bootstrap": "3.3.6",
    "desandro-matches-selector": "2.0.0",
    "fizzy-ui-utils": "2.0.4",
    "font-awesome": "4.6.3",
    "get-size": "2.0.0",
    "isotope-layout": "3.0.1",
    "jasny-bootstrap": "3.1.3",
    "jquery": "2.2.0",
    "jquery-countto": "1.2.0",
    "jquery-knob": "1.2.11",
    "jquery-countdown": "2.2.0",
    "magnific-popup": "1.1.0",
    "masonry-layout": "4.1.0",
    "material-design-icons": "3.0.1",
    "open-sans-fontface": "1.4.0",
    "outlayer": "2.1.0",
    "sharrre": "2.0.1",
    "smoothscroll-for-websites": "1.4.4",
    "vide": "0.5.0",

As we can see above the dependencies with prefix @bower_components still uses bower

And copy-webpack-plugin is added to "devDependencies"

 "devDependencies": {
    "copy-webpack-plugin": "4.2.1",

step 3

add to the plugin section to the webpack.config.js

new CopyWebpackPlugin(
  Assets.filter(asset => !fs.existsSync(
    path.resolve(__dirname, `./public/vendor/${asset}`)
  )).map(asset => {
    return {
      context: path.resolve(__dirname, './node_modules/'),
      from: `${asset}`,
      to: path.resolve(__dirname, `./public/vendor/${asset}`),
      toType: 'dir'
    };
  }, {
      ignore: [
        {
          dot: true,
          glob: 'node_modules/**/*'
      }, '*.txt', '**/*'],
    copyUnmodified: false
  })
);

Whenever the npm run build is ran, it copies the listed folders in the assets.js to the ./public/vendor/