javascript - bundle-loader解析import异于ES6 module-PHP中文网问答

问题

技术栈:react+ redux+ react-router...

因为项目是一个SPA，入口文件随着项目的增加随之增大，于是准备将react-router异步加载。

方案一：(因为层级过深，书写麻烦，没有考虑)

webpack(require.ensure)+ react-router

方案二：

webpack(bundle-loader)+ react-router(lazyLoadComponent)

在打包的过程中重点来了：发现bundle-loader对import进行了重新的解析，这种解析并不符合ES6 module许多特性没有支持。

例如：es6语法

import { OrderInfoMessage } from './fundConfirmCom/fundConfirmInfoOrder';
console.log(OrderInfoMessage)
// 可以解析

但是使用bundle-loader进行打包

import { OrderInfoMessage } from './fundConfirmCom/fundConfirmInfoOrder';
console.log(OrderInfoMessage) // undefined
// bundle-loader可以识别的方式：
import * as OrderInfoMessage from './fundConfirmCom/fundConfirmInfoOrder';
console.log(OrderInfoMessage) // 可以解析

解决方案

但是现在项目使用的是typescript,对common.js“不支持“(用的时候需要declare require/module);

因此没有考虑common.js的写法;

将主体文件交给bundle-loader，将components组件交给ts-loader打包。就避免了这种问题的出现；

但是这种方式没有完全达到我的期望，因为现在只是部分文件被异步加载，components组件依然被打包在app.js中。

所以请教解决方案既能和ES6 module语法保持一致，又可以达到健全的异步加载。