publish to npm

Question

publish to npm

soenkekluth opened this issue 8 years ago · 21 comments

my PR allows you to publish by executing one of the realease scripts.

the PR: #1

Answer 1 · 2017-01-29T07:50:40.000Z

Hi and thanks for this. That's why I renamed the project from vanillaTilt.js to vanilla-tilt.js so I can publish it to NPM under the same name 😄.

I was already working on this, but I will check your work and will accept the PR if everything is ok. 👍

I'm new to all this "public open source project" and PR / Issues. I hope I do it right

Answer 2 · 2017-01-30T19:03:36.000Z

I merged the PR, whats the next move?

Answer 3 · 2017-02-01T15:49:08.000Z

Looking through your project, it looks like its ready to publish.

Here's a tutorial how to publish it on npm, if you don't know it yet.

Update:
I tried to install the package using the npm install --save https://github.com/micku7zu/vanilla-tilt.js.git. This does not work using CommonJS (+ Webpack)

require('vanilla-tilt')

does not find the package

require("../node_modules/vanilla-tilt/dist/vanilla-tilt")
throws this error:

Module build failed: ReferenceError: Unknown plugin "transform-class-properties" specified in "/home/users/brunnel6/workspace/Private/Portfolio/node_modules/vanilla-tilt/.babelrc" at 0, attempted to resolve relative to "/home/users/brunnel6/workspace/Private/Portfolio/node_modules/vanilla-tilt"
    at /home/users/brunnel6/workspace/Private/Portfolio/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (native)
    at Function.normalisePlugins (/home/users/brunnel6/workspace/Private/Portfolio/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/home/users/brunnel6/workspace/Private/Portfolio/node_modules/babel-core/lib/transformation/file/options/option-manager.js:233:36)
    at OptionManager.init (/home/users/brunnel6/workspace/Private/Portfolio/node_modules/babel-core/lib/transformation/file/options/option-manager.js:367:12)
    at File.initOptions (/home/users/brunnel6/workspace/Private/Portfolio/node_modules/babel-core/lib/transformation/file/index.js:216:65)
    at new File (/home/users/brunnel6/workspace/Private/Portfolio/node_modules/babel-core/lib/transformation/file/index.js:139:24)
    at Pipeline.transform (/home/users/brunnel6/workspace/Private/Portfolio/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/home/users/brunnel6/workspace/Private/Portfolio/node_modules/babel-loader/lib/index.js:38:20)
    at Object.module.exports (/home/users/brunnel6/workspace/Private/Portfolio/node_modules/babel-loader/lib/index.js:133:12)
 @ ./src/index.js 2:18-75

thoughts on this @micku7zu @soenkekluth ?

Answer 4 · 2017-02-02T21:12:49.000Z

I didn't have enough time to check all this CommonJS and Webpack. I don't have enough knowledge about them, so, anyone who can help is welcome 😄

Answer 5 · 2017-02-22T13:53:36.000Z

@micku7zu I figured it out why this error happened. See Issue #11
So now could you publish the package on npm? Or is it already?

Answer 6 · 2017-02-22T13:56:41.000Z

@BrunnerLivio I will have a look on this later today 👍

Answer 7 · 2017-02-22T19:38:15.000Z

I can't run "npm run build" or anything... I don't have enough time to debug :(

Answer 8 · 2017-02-23T19:21:49.000Z

@micku7zu I fixed the build and deploy scripts. The "npm" before "run" was missing. But I still have the same issue as @BrunnerLivio. Will look into that now. 👍

Answer 9 · 2017-02-23T19:22:49.000Z

Thanks @bastilimbach

Answer 10 · 2017-02-23T19:37:35.000Z

Is it correct, that you use vanilla-tilt.bable.js in a script tag or CDN? That's the "not ES6 or whatever" version, right?

Answer 11 · 2017-02-23T20:46:43.000Z

Ok PR #12 should fix this error. 👍

Answer 12 · 2017-02-23T22:31:01.000Z

Finally, it's here: https://www.npmjs.com/package/vanilla-tilt

Can you please check that everything it's ok and it's working fine? 😄

Thanks @bastilimbach @BrunnerLivio

Answer 13 · 2017-02-24T07:20:58.000Z

Tried it with webpack and babel. Worked with using require('vanilla-tilt');! Good work everyone.

Did not try using script-tag. Maybe need some feedback there before closing this issue

Edit: By the way, don't forget to release-tag the version 1.3

Answer 14 · 2017-02-24T07:27:40.000Z

I tested the script-tag with my implementation of the module wrapper. This worked perfectly. But as @micku7zu wrote in PR #12 (Comment) he isn't sure if the wrapper is the final/best solution.

Answer 15 · 2017-02-24T07:30:05.000Z

Thanks guys, I close this issue and we will see about the module wrapper in the weekend 😄 I think will merge that too 👍

I will also have a look at bower 👍

Answer 16 · 2017-02-24T07:33:17.000Z

Bower? That so 2015! 😂 Keep up the great work. 👍

Answer 17 · 2017-02-24T07:37:10.000Z

@bastilimbach True that haha, but I think in some use cases it is still usefull! Should not consume too much time to support it, so lets do it.

Answer 18 · 2017-02-24T07:53:47.000Z

Oh god, I'm not good with all these package managers 😂

Answer 19 · 2017-02-24T07:54:59.000Z

@micku7zu If you need help, open a WIP Pull Request 😉

Answer 20 · 2017-02-24T07:56:00.000Z

I need an example of how do you use vanilla-tils.js using npm. Whats the flow?

Answer 21 · 2017-02-24T08:03:00.000Z

Well, you use it like the client side. Just write your normal:

.init(document.querySelector(".your-element"), {
		max: 25,
		speed: 400
	});

The require just makes it possible for module bundlers like Webpack to bundle vanilla-tilt with every other .js file into a big bundle.js. So what webpack does is, it collects all your modules/files look which methods you are using/are needed and extracts them. Then it bundles all these functions into one big bundle.js file, which is included via the <script> tag. Of course Webpack does a lot other cool stuff in the background, but that's the basic concept.