EragonJ / Trip.js

🚀 Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities.

Home Page:https://eragonj.github.io/Trip.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Use webpack to build Trip.js

EragonJ opened this issue · comments

As title, in order to make code cleaner, I am going to introduce webpack to help us separate roles of each file and make the codebase easier to read / maintain.

BTW, it's almost 70% done :)

This patch will make Trip.js follow umd and can be required by in AMD & CommonJS way.

It's just a matter of curiosity. Why did you choose webpack? Did you search before start porting or is just a personal taste? btw, code looks nicer now.

I have used webpack in my another side project for more than 6 months here https://github.com/EragonJ/Kaku, and after introducing webpack, code structure has been well defined and in order.

In addition to this, it does support webpack -watch for development use so that you don't need to re-generate the code by yourself.

Because Trip.js was developed long time ago, there are something which can be improved, and I think webpack is just the first start which can also help us support UMD (This is another main reason), so right now Trip.js can be required in AMD way, CommonJS way or just Vanilla JS !

Hope this helps :)

Long time ago, if you did check the source code, you will notice that Trip.js is composed by several javascript files (trip.core.js / trip.parser.js ... etc). This is good, but if you did check it closely, you will notice that it's impossible to use each of them separately ! (Because I just concat them into a big file, so it means some variables may be stored in trip.parser.js and can't be directly seen in trip.core.js and this is lame)

For a better design, each file should has its own responsibility and work well by itself, for this, it would be easier to write unit test for each one and don't need to take care of the others, so that's why webpack helps here ! No needless to say that it does have several plugins installed which can help us do minify ... etc !

Good point, I was reading about requirejs and it seems to be old and not so famous anymore. These dev-mode feature are super helpful. Thank you for your enlightenment. I'll will test deep with webpack.

@kafeltz well you may be right, AMD style doesn't win out too much in the battle but we can't say that there is no people using that anymore ! When I was still in Mozilla, we still use that a lot in our projects, so that's why UMD is a better solution here especially Trip.js is a library that will be used in different scenarios !

If you are going to give webpack a try, trust me, don't read official documentation !! The awful part of webpack is the lack of well documentations ! You can check what Pete Hunt wrote here at https://github.com/petehunt/webpack-howto. He made this when introducing webpack into instagram and after reading tons of tutorials, this is the best one to start with !

Hope this helps ;)