3

Im using es6 feature like import and classes , now i understand that the browser doesn't support import feature and i read here. that i need to convert the es6 code into es5 , and after it i need to bundle them using Browserify or gulp, webpack, browserify, etc. Now the question going like that: the code changes everytime and i want to check my results , do i need to repeat of this procedure everytime before i want to see the results?

Community
  • 1
  • 1
Elad Israeli
  • 131
  • 2
  • 11

1 Answers1

2

Yes, every time you change something you need to rebuild it unfortunately. Take a look at watchify or for more complex projects you might consider using grunt or any other task runner to automate the process. 

// first install watchify, babelify and babel-preset-es2015
watchify script.js -o bundle.js -t [ babelify --presets [ es2015 ] ]
lupatus
  • 4,208
  • 17
  • 19
  • Okay but before i rebuild it i need to translate es6 to es5 and then budle it ... there is a way to do it automatically? – Elad Israeli Feb 10 '16 at 18:10
  • Take a look at example I put here, there is babelify (babel plugin for browserify) with es2015 preset included - that will do translation before packaging – lupatus Feb 11 '16 at 00:51
  • Couldn't find preset "es2015" relative to directory ".." what can cause this problem and secondly do i need to give the script.js before i babel it to es5 right? – Elad Israeli Feb 15 '16 at 23:45
  • I think I had this problem with "could not find es2015" when I had browserify and others installed locally for project and script that was packaged had path unrelated to project - for some reason it looks for node_modules in script directory or any parent directory of script. probably it's enough to install preset globally or move sources to directory where you have node_modules. if you're running watchify/browserify with babelify transform and es2015 preset (as in my example) you don't have to do anything extra, output package is what you can use in browser already. – lupatus Feb 16 '16 at 00:05
  • well it worked out , but now i face another problem with your solution its convert one file into bundle , but what if i have alot of files , and lets say im using angular so i have templates and one index page who changes with ajax so the sources for scripts need to load once on the first page for the whole application, how can i solve this problem , when here i bundle only one file .. "script.js" – Elad Israeli Feb 16 '16 at 17:05
  • browserify parses require / import statements so everything you require() will be included in the bundle, additionally you can specify more than one file (i.e. `src/*/**.js` to include any js file in src directory). I don't know how to include templates for angular as I'm not using it, but google it, for sure there is some way. – lupatus Feb 16 '16 at 17:12
  • I tried installing watchify, babelify and babel-preset-es2015 but getting "Plugin/Preset files are not allowed to export objects, only functions". I am using "@babel/core": "^7.7.2", "babel-preset-es2015": "^6.24.1", "babelify": "^10.0.0" and "watchify": "^3.11.1". Is this answer still valid? – developer Nov 21 '19 at 16:37