mercredi 21 mars 2018

Trouble importing custom library from a repository into an Ember project as a dependency

I am developing a WebGL library that I would like to import into an EmberJS project as a dependency. Unless I'm mistaken, I believe that I can do this via the repository directly without having to make an npm package but I am having trouble getting it to work.

I have made a watered down library and ember project in a couple repos here and here respectively to demonstrate my problem.

If you clone the library and run npm run build it'll make a test bundle which can be called by the test html file packageTest.html. It should print out 'Hello World Test Member is: 5'.

In the Ember project I have a component in which I would like to import the 'HelloWorld' class from the library and call one of its member methods.

import Ember from 'ember';
//import HelloWorld from 'npm-package-test';
export default Ember.Component.extend({
  isWide: false,
  actions: {
    toggleImageSize() {
      // var h = new HelloWorld();
      // console.log(h.print());
      this.toggleProperty('isWide');
    }
  }
}); 

When I uncomment the import statement I get the console error

Error: Could not find module 'npm-package-test'

I'm still pretty new to npm packaging and how dependencies work (and know next to nothing about Ember) but from my limited understanding I feel like this method should work the way I currently have it.

For the library, I have the source files being babeled into ES5 in its lib folder. As you can see in the package.json for the library below I have the main set to the index file in the lib folder so that the Ember project can pull the babeled modules.

Library: package.json

{
  "name": "npm-package-test",
  "version": "1.0.0",
  "description": "JibJab Render Library for eCards",
  "main": "lib/index.js",
  "scripts": {
    "prepublishOnly": "npm run build",
    "build-test": "browserify test.js > demo/testbundle.js",
    "build": "babel ./src -d ./lib && npm run build-test",
    "lint": "eslint ./src",
    "test": "nyc mocha --require babel-core/register"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/nhoughto5/NPM_PackageTest.git"
  },
  "author": "JibJab",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/nhoughto5/NPM_PackageTest/issues"
  },
  "homepage": "https://github.com/nhoughto5/NPM_PackageTeste#readme",
  "devDependencies": {
    "babel-cli": "6.26.0",
    "babel-preset-env": "1.6.1",
    "eslint": "4.19.0",
    "mocha": "5.0.4",
    "nyc": "11.6.0"
  },
  "nyc": {
    "reporter": [
      "lcov",
      "text"
    ]
  },
  "dependencies": {
    "domready": "^1.0.8"
  }
}

For reference, here is the lib/index.js which should be the entry point of my library:

Library: lib/index.js 'use strict';

module.exports = {
  TestClass: require('./TestClass'),
  HelloWorld: require('./HelloWorld')
};

In the ember project I have the library repository listed as a dependency:

Ember: package.json

{
  "name": "test-ember-app",
  "version": "0.0.0",
  "description": "Small description for test-ember-app goes here",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "repository": "",
  "scripts": {
    "build": "ember build",
    "start": "ember server",
    "test": "ember test"
  },
  "devDependencies": {
    "broccoli-asset-rev": "^2.4.5",
    "ember-ajax": "^3.0.0",
    "ember-browserify": "1.2.1",
    "ember-cli": "2.13.1",
    "ember-cli-app-version": "^3.0.0",
    "ember-cli-babel": "^6.0.0",
    "ember-cli-dependency-checker": "^1.3.0",
    "ember-cli-eslint": "^3.0.0",
    "ember-cli-htmlbars": "^1.1.1",
    "ember-cli-htmlbars-inline-precompile": "^0.4.0",
    "ember-cli-inject-live-reload": "^1.4.1",
    "ember-cli-mirage": "0.4.3",
    "ember-cli-qunit": "^4.0.0",
    "ember-cli-shims": "^1.1.0",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-tutorial-style": "2.0.0",
    "ember-cli-uglify": "^1.2.0",
    "ember-data": "^2.13.0",
    "ember-export-application-global": "^2.0.0",
    "ember-load-initializers": "^1.0.0",
    "ember-resolver": "^4.0.0",
    "ember-source": "~2.13.0",
    "ember-welcome-page": "^3.0.0",
    "loader.js": "^4.2.3"
  },
  "engines": {
    "node": ">= 4"
  },
  "private": true,
  "dependencies": {
    "npm-package-test": "git+https://github.com/nhoughto5/NPM_PackageTest.git"
  }
}

When I run npm install in the ember project I can see that the folder structure from the library appears in the node_modules folder. To my limited experience, everything seems correct but for some reason I am still getting this undefined module error.

Is there a step I've missed or some crucial detail I'm missing?




Aucun commentaire:

Enregistrer un commentaire