index.html引入es6和commonjs语法需要怎么处理

小西柚啊
300 阅读2分钟
1、通过npm init， 然后一直回车，会初始化一个node项目（仅包含package.json一个文件）
2、然后新建main.js、index.html、module1.js文件

image.png

// main.js
import {fn1, fn2} from './module1'
console.log(fn1,fn2,'module1');

// module1.js
export function fn1() {
    console.log('这是模块1的fn1函数执行的')
}
export function fn2() {
    console.log('这是模块1的fn2函数执行的')
}

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./main.js"></script>
</head>
<body>
    
</body>
</html>

此时会报错：因为浏览器不能识别es6语法，需要转化为es5语法

image.png

3、转化为es5语法，需要借助插件babel-cli插件

（1）安装插件

    npm install babel-cli -g
    npm install babel-es2015 -save-dev

（2）新建.babelrc文件，因为执行babel指令的时候需要读取配置文件

// es2015 === es6
// 预设置es6规则，.rc文件是babel指令运行时要读的配置文件，presets中代表要转化的语法有哪些
{
  "presets": ["es2015"]
}

（3）执行babel js/src -d js/build 把src下面的文件的es6转成es5，并输出到build文件夹

image.png

// ./build/main.js

'use strict';

var _module = require('./module1');

console.log(123);

console.log(_module.fn1, _module.fn2, 'module1');

此时发现build中的main.js包含require语法,浏览器也不能有效的识别，还需要通过browserify插件把commonjs的代码转化为普通的代码

4、通过browserify把require转化为可识别的代码

  npm install browserify -g
  browserify js/build/main.js -o dist/bundle.js

image.png

// bundle.js文件
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
'use strict';

var _module = require('./module1');

console.log(123);

console.log(_module.fn1, _module.fn2, 'module1');

// babel  js/src -d js/build
},{"./module1":2}],2:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.fn1 = fn1;
exports.fn2 = fn2;
function fn1() {
    console.log('这是模块1的fn1函数执行的');
}
function fn2() {
    console.log('这是模块1的fn2函数执行的');
}
},{}]},{},[1]);

此时index.html文件引入bundle.js，可以正确执行

avatar
文章
阅读
粉丝