bundle-loader解析import异于ES6 module


问题

技术栈: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语法保持一致,又可以达到健全的异步加载。



相关阅读:
video标签怎么控制播放内容的宽高?
IE兼容 React
弹出提示窗口JS怎么设置弹出一次,假设多弹出也要把前者取消,让后者弹出一次?
前端如何掌握必须的http知识?
在pfsense中启动barnyard2失败
scrapy怎么设置返回码不是200换代理
为什么有的公司要求DBA禁止使用between?
Laravel 如何获取路由名称?
前后端分离中碰到跨域问题大家是怎么解决的?
阮一峰老师《ECMAScript 6入门》第一节中的疑问
定时器中this为什么会指向window
backbone排序问题,视图实时排序
vuex中的state值,在工具类模块中怎么获取?
怎样用yii2.0配合mongodb做后台的权限控制系统???
类方法里实现网络请求类单例的方法有些情况返回不了数据
mysql如何合并两张结构相同的数据表?
easyui1.5 datagrid中分页显示不正常,求教各位
API Gateway 或者 OpenAPI设计思想?
vue.js实现组件间的上移下移
新人小白问题之 什么时候需要用到form标签?什么时候不必用,用不用有什么区别?



快速导航

Copyright © 2016 phpStudy |