Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to solve the problem of import error in es6. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Es6 import error solution: 1, use bebal to convert es6 into es5;2, package through webpack, merge all the dependencies into a file, and then use babel for conversion.

This article operating environment: windows7 system, ECMAScript version 6, Dell G3 computer.

How to solve the problem of es6 import error reporting?

Nowadays, most browsers do not support ES6, so when using es6, you need to use bebal to convert es6 to es5.

Project catalog:

Demo1: conversion of a single js file

Test1.js under the src file

Const aa= "this is test1"; console.log ("this is from test1", aa);\

Introduce the bebal file in the project root directory

.babel

Content:

{presets: ["es2015"]}

Install babel-cli

Cnpm I babel-cli-g

Because you want to transfer es6 to es5, you also need to install babel-preset-es2015.

Cnpm I babel-preset-es2015-- save-dev

Convert test1.js

Babel src-out-dir dist

(convert the js file in the src directory to es5 to dist file)

The test1.js running under dist will not report an error.

Demo2: multiple file projects are introduced and converted

Under the src file:

Test2.js

Const bb= "this is bb"; export {bb}

Test3.js

Import {bb} from 'test2.js'console.log (bb)

Convert babel src-out-dir dist

The page introduces the test2.js test3.js under the dist file

Error

Because we compile ES6 into es5,node module through node;, we refer to the specification of CommonJS, and today's browsers and node do not support most ES6.

Solution.

You can package it through webpack, merge all the dependencies into one file, convert it with babel, and then introduce it into the html file.

This is the end of this article on "how to solve the problem of import reporting errors in es6". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.