anseki / plain-draggable

The simple and high performance library to allow HTML/SVG element to be dragged.
https://anseki.github.io/plain-draggable/
MIT License
773 stars 99 forks source link

"module" script was not transpiled to ES5 #4

Closed caghand closed 6 years ago

caghand commented 6 years ago

Hi anseki,

Thank you for adding the "module" property to package.json. There is one last problem remaining, for "Create React App" users. After importing your package, npm run-script build throws the following error:

Failed to minify the code from this file:

        ./node_modules/plain-draggable/src/plain-draggable.js:26

Read more here: http://bit.ly/2tRViJ9

If you follow the link above, under the heading "npm run build fails to minify", you will see that they require the "module" script to be transpiled to ES5 except for the ES module directives (import/export).

Well, I think you know this already, because the specs in https://github.com/rollup/rollup/wiki/pkg.module mention the same thing. :)

Could you please take care of this? It should be pretty easy. For example, in plain-draggable:

1) npm install --save-dev babel-cli 2) Add a new build script to package.json, like this: "build-module": "babel src/plain-draggable.js --out-file plain-draggable.es.js" 3) Add a new .babelrc file at your repository root, with the following contents:

{
    "presets": [
        ["es2015", {"modules": false}]
    ]
}

4) In package.json, point the "module" property to "plain-draggable.es.js". 5) Make sure to call npm run-script build-module before publishing.

If my understanding is correct, this should make your packages 100% ready for consumption.

Thanks!

-Caghan

anseki commented 6 years ago

Hi @caghand, thank you for the comment.

That is not easy because other apps already refer to the "module" field. I need time for a while to check and think.

caghand commented 6 years ago

Let me also mention that the "jsnext:main" property can continue to point to the full ES2015 version, if you want. :)

anseki commented 6 years ago

Thank you for your proposal. However, the jsnext:main should point same as module because it means the same. And also, unfortunately it seems that the way you indicated has some problems. Anyway, I need time for a while to check and think. Please wait that.

anseki commented 6 years ago

I thank you for your proposal. I tried that but it didn't work (some errors occurred) unfortunately, and it has some problems.

I updated library. Please try new version.

caghand commented 6 years ago

The new version is working perfectly!!! Finally, I can consume & bundle plain-draggable just like a normal NPM module. Thank you for working on this.

If possible, could you add the "module" property to the leader-line package as well? :)

anseki commented 6 years ago

Thank you for the checking. :smile:

The LeaderLine is written with ES5, then just the module property can't make that be imported. However, you can use legacy libraries such as the LeaderLine easily by accessing global object or importing that via additional tool such as skeleton-loader that exports that.

If you have any question about the LeaderLine (or skeleton-loader), please close this issue (if this issue was already solved), and make a new issue in the LeaderLine's repository (or skeleton-loader).

caghand commented 6 years ago

Oh I see. Thanks for the tip about skeleton-loader. Unfortunately, since Create React App users (like me) don't have access to the webpack configuration, I am not able to use it. However, I finally succeeded in importing leader-line, by using the "inline" version of script-loader. It's working great! :)