import和export語法報錯

時間 2019-12-08

標籤 import export 語法報錯简体版

原文原文鏈接

「最近在學習ES6」，可是在chrome中新建了js經過ES6語法(import,export)沒法引入外部JS，報錯：javascript

Uncaught SyntaxError:Unexpected token {html

b.jsjava

import {sex,echo} from "./a.js";

console.log(sex); 
echo(sex)

a.jsnode

var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo}

inde.htmlwebpack

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./b.js"></script>
</head>
<body>
</body>
</html>

咱們都知道如今瀏覽器對於ES2015(ES6)的語法支持還不是很強, 即使是使用Firefox和Chrome瀏覽器, 若是版本比較低的話, 可能還只能支持一部分語法, 所以想要使得開發人員編寫出來的ES6語法可以正常地在各個瀏覽器運行的話, 仍是須要將編寫的JS文件經過一些工具編譯成ES5語法才行, 那麼這個工具就是babel. 如何使用babel來進行語法的編譯在這裏能夠看獲得:
http://www.ruanyifeng.com/blog/2016/01/babel.html
這裏就不贅述了.
然而, Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，好比Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（好比Object.assign）都不會轉碼。並且像import和export這兩個命令如今在任何瀏覽器中都是不支持的, 同時babel也沒法將其轉換爲瀏覽器支持的ES5, 緣由在於:web

babel只是個翻譯，假設a.js 裏 import 了 b.js, 對a.js進行轉碼，只是翻譯了a.js，並不會把b.js的內容給讀取合併進來, 若是想在最終的某一個js裏，包含 a.js，b.js 的代碼，那就須要用到打包工具chrome

因此我在這裏講解一下如何使用webpack工具將帶有import和export語法的JS文件, 經過打包工具生成全部瀏覽器都支持的單個JS文件.npm

1. 下載node.js和webpack

Node.js是一個基於Chrome JavaScript運行時創建的平臺，用於方便地搭建響應速度快、易於擴展的網絡應用。能夠說就是服務器端的JS. webpack是一個打包工具, 而它是依賴於node.js運行的.
下載node.js能夠經過官網: http://nodejs.cn/download/
具體的安裝步驟網上能夠搜到不少, 這裏再也不贅述. 安裝完畢後打開node.js自帶的命令行工具
json

而後輸入以下命令全局安裝webpack工具瀏覽器

npm install -g webpack

接着經過命令行工具定位到你的工程文件的根目錄下, 再次安裝webpack到你的工程中

npm install webpack

2. 編寫webpack.config.js文件

在根目錄下建立webpack.config.js, 這個文件是用來描述一些要使用webpack工具進行打包的配置信息, 文件內容以下:

經過該文件可使用webpack打包工具, webpack會從import.js進入, 對該文件中的內容進行編譯並打包, 最終會在dist目錄下生成打包好的文件bundle.js, 編譯打包過程當中用到的工具在module對象的loaders中聲明, 這裏使用了babel-loader來對JS文件進行編譯(包括從ES6轉換爲ES5以及打包)

3. 建立import.js

建立一個import.js, 內容以下:

在該文件中經過ES6語法import從export.js中引入firstName和lastName變量. 而且經過console.log將引入的兩個變量打印到控制檯.

4. 建立export.js

在該文件中經過ES6語法export將文件中的幾個變量做爲模塊輸出給別的文件引用.

5. 建立HTML文件

在HTML文件中直接將webpack最終打包生成的bundle.js文件引入便可, 由於經過webpack工具已經將export.js和import.js的全部內容都打包到一個文件bundle.js中了, 所以在HTML文件中引入該文件便可以將兩個JS文件中的代碼都執行.

6. 配置.babelrc文件

在工程文件的根目錄下建立一個.babelrc文件(注意前面有個點), 這個文件是用來描述我要根據什麼樣的規則、或者是將JS文件編譯成什麼版本的文件(好比說ES5). 該文件的內容以下:

7. 下載相關依賴模塊

方式1: 能夠像下面這樣, 直接在項目根目錄下建立一個package.json文件, 而且在文件中指定devDependencies對象, 在該對象中寫上我編譯及打包中所要使用到的依賴模塊, 圖片中的webpack就是用於打包的工具, 而其餘的以babel開頭的選項都是編譯JS文件並打包所須要用到的依賴模塊.

建立好package.json文件後, 在命令行中輸入

npm install

npm工具就會根據該文件中devDependencies選項下載對應的依賴模塊.

方式2(推薦): Ctrl+R打開運行, 而後輸入cmd打開命令行工具, 經過命令行工具一個個安裝, 這樣能夠直接經過npm去下載依賴模塊最新的穩定的版本, 同時也不須要本身去記這些模塊的版本號

npm install babel npm install babel-cli npm install babel-core npm install babel-loader npm install babel-preset-es2015

8. 使用 webpack打包

使用命令行工具定位到項目的根目錄下, 而後輸入以下指令

webpack

等待一下子就會發現工程文件的目錄下多了一個dist文件夾, 裏面放着的就是打包好了的bundle.js文件, 在HTML文件中經過下面的代碼引入js文件

<script src="dist/bundle.js"></script>

而後在瀏覽器上運行html文件, 使用F12打開開發者工具, 就能夠看到console選項中輸出兩行記錄」Micheal」, 「Jackson」

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。