transpiled javascript in html - 2 : 정리중
babel로 트랜스파일한 js파일 html에서 렌더링할때 생기는 에러 문제 :
브라우저/클라이언트 단 -
Client on Node.js: Uncaught ReferenceError: require is not defined
CommonJS client side-implementations include (most of them require a build step before you deploy):
Now you're going to have to make some choices about your client-side JavaScript script management.
- Browserify - You can use most Node.js modules in the browser. This is my personal favorite.
- Webpack - Does everything (bundles JavaScript code, CSS, etc.). It was made popular by the surge of React, but it is notorious for its difficult learning curve.
- Rollup - a new contender. It leverages ES6 modules and includes tree-shaking abilities (removes unused code).
+ http://plnkr.co/edit/ln6J7wfdsJPUNzaEi3u6?preview
★★ How do I include a JavaScript file in another JavaScript file?
Is there something in JavaScript similar to @import in CSS that allows you to include a JavaScript file inside another JavaScript file?
--------------
The old versions of JavaScript had no import, include, or require, so many different approaches to this problem have been developed.
But since 2015 (ES6), JavaScript has had the ES6 modules standard to import modules in Node.js, which is also supported by most modern browsers.
For compatibility with older browsers, build tools like Webpack and Rollup and/or transpilation tools like Babel can be used.
---------------------
Rollup :
Why I use Rollup, and not Webpack
Webpack and Rollup: the same but different
How to Bundle JavaScript With Rollup — Step-by-Step Tutorial
index.html not load transpiled javascript from babel
Are you using webpack with babel to transform your ES6 code to ES5 code? Once you setup webpack, there is a loader called "babel-loader" which does the transform for you.
HTML page not running JavaScript (transpiled by Babel)
Babel only transpiles individual files and assumes there's a CommonJS module framework in place. In other words, if your environment doesn't support require you need another tool to take care of the bundling, such as Webpack or Browserify.
I searched a bit about both. In other words browserify or webpack works like Babel? I would say.. It converts the code to a new file with refactored sentences or works at background? Sorry, I'm newbie in Javascript/web development. –
@LucasSousa Yes, in that sense they work the same way, they take the source code and produce a new JS file. The most common way to use them in conjunction with Babel is to have Babel as a plugin, which transpiles each individual file before the modules are bundled. Both Webpack and Browserify have utilities for watching the source files
----------------------
https://xperimentalhamid.com/how-do-i/fix-cannot-use-import-statement-outside-a-module/
Simplest Solution for the Issue
The static import statement is used to import bindings that are exported by another module.
Imported modules are in strict mode whether you declare them as such or not.
The import statement cannot be used in embedded scripts unless the script has a type="module". Here is an example for the import statement with type module.
<script type="module" src="app.js"></script>
# If it is not a module i.e. simple script
# you can use the nomodule tag
<script nomodule src="classic-app-bundle.js"></script>
Other Solutions
There are a lot of reasons for the issue mentioned above to happen. For example you might source a file in the src directory instead of the built file in the dist directory.
This means that you’re using the native source code in an unaltered/unbundled state, leading to the following error: Uncaught SyntaxError: Cannot use import statement outside a module. You can fix the issue by building the script file and importing them.
Cross-browser JavaScript problems - MDN web docs
Another option that is becoming popular for people that want to use modern JavaScript features now is converting code that makes use of ECMAScript 6/ECMAScript 2015 features to a version that will work in older browsers.
Note: This is called "transpiling" — you are not compiling code into a lower level to be run on a computer (like you would say with C code); instead, you are changing it into a syntax that exists at a similar level of abstraction so it can be used in the same way, but in slightly different circumstances (in this case, transforming one flavor of JavaScript into another).
So for example, we talked about arrow functions (see arrow-function.html live, and see the source code) earlier in the article, which only work in the newest browsers:
() => { ... }Copy to Clipboard
We could transpile this across to a traditional old-fashioned anonymous function, so it would work in older browsers:
function() { ... }Copy to Clipboard
The recommended tool for JavaScript transpiling is currently Babel. This offers transpilation capabilities for language features that are appropriate for transpilation. For features that can't just be easily transpiled into an older equivalent, Babel also offers polyfills to provide support.
The easiest way to give Babel a try is to use the online version, which allows you to enter your source code on the left, and outputs a transpiled version on the right.
Note: There are many ways to use Babel (task runners, automation tools, etc.), as you'll see on the setup page.
https://www.youtube.com/watch?v=MzZilaM16oY&t=83s