Taro 3.0 小程序动态加载
License: MIT License
基于 Taro 3.0 的小程序端动态加载逻辑
使用方式见 taro-plugin-dynamic-import-weapp
建议 node 版本 12.x
# 项目根目录安装依赖
yarn
# 编译项目
yarn run compile
# 打包 demo 项目, 默认开发端口是 5000
yarn run start项目运行后:
packages/demo/src/dynamic-import 中的代码, 对比打包结果注意, 如果没有提供 port 和 publicPath 的情况下, 会使用随机生成的端口, 每次打包都会更改
runtime.js的publicPath端口, 正式环境指定publicPath即可
静态页面示例图:
动态页面示例图:
webpack 5.0+wxss, 建议使用原子性的 CSS 库 tailwind CSS
Error: Module parse failed: baseVisitor[type] is not a function
File was processed with these loaders:
* ../../node_modules/@tarojs/mini-runner/node_modules/babel-loader/lib/index.js
* ../../node_modules/@tarojs/mini-runner/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
TypeError: baseVisitor[type] is not a function
at c (:64254/Users/jack/Desktop/git/taro-dynamic-import-weapp/node_modules/acorn-walk/dist/walk.js:29)
at Object.skipThrough (:64254/Users/jack/Desktop/git/taro-dynamic-import-weapp/node_modules/acorn-walk/dist/walk.js:186)
at c (:64254/Users/jack/Desktop/git/taro-dynamic-import-weapp/node_modules/acorn-walk/dist/walk.js:29)
at Object.base.NewExpression.base.CallExpression (:64254/Users/jack/Desktop/git/taro-dynamic-import-weapp/node_modules/acorn-walk/dist/walk.js:389)
at c (:64254/Users/jack/Desktop/git/taro-dynamic-import-weapp/node_modules/acorn-walk/dist/walk.js:29)
at Object.skipThrough (:64254/Users/jack/Desktop/git/taro-dynamic-import-weapp/node_modules/acorn-walk/dist/walk.js:186)
at c (:64254/Users/jack/Desktop/git/taro-dynamic-import-weapp/node_modules/acorn-walk/dist/walk.js:29)
at Object.base.ReturnStatement.base.YieldExpression.base.AwaitExpression (:64254/Users/jack/Desktop/git/taro-dynamic-import-weapp/node_modules/acorn-walk/dist/walk.js:240)
at c (:64254/Users/jack/Desktop/git/taro-dynamic-import-weapp/node_modules/acorn-walk/dist/walk.js:29)
at Object.skipThrough (:64254/Users/jack/Desktop/git/taro-dynamic-import-weapp/node_modules/acorn-walk/dist/walk.js:186)
at c (:64254/Users/jack/Desktop/git/taro-dynamic-import-weapp/node_modules/acorn-walk/dist/walk.js:29)
at Object.base.Program.base.BlockStatement (:64254/Users/jack/Desktop/git/taro-dynamic-import-weapp/node_modules/acorn-walk/dist/walk.js:198)
at c (:64254/Users/jack/Desktop/git/taro-dynamic-import-weapp/node_modules/acorn-walk/dist/walk.js:29)
at Object.skipThrough (:64254/Users/jack/Desktop/git/taro-dynamic-import-weapp/node_modules/acorn-walk/dist/walk.js:186)
at c (:64254/Users/jack/Desktop/git/taro-dynamic-import-weapp/node_modules/acorn-walk/dist/walk.js:29)
at Object.base.Function (:64254/Users/jack/Desktop/git/taro-dynamic-import-weapp/node_modules/acorn-walk/dist/walk.js:296)
at Object.../../node_modules/@tarojs/mini-runner/node_modules/babel-loader/lib/index.js!./src/pages/dynamic/index.tsx (index.js:12)
at __webpack_require__ (webpack_bootstrap:79)
at Module../src/pages/dynamic/index.tsx (._src_pages_dynamic_index.tsx:1)
at __webpack_require__ (webpack_bootstrap:79)
at checkDeferredModules (webpack_bootstrap:45)
at Array.webpackJsonpCallback [as push] (webpack_bootstrap:32)
at index.js:2
at require (VM119 WAService.js:2)
at <anonymous>:60:9
at doWhenAllScriptLoaded (<anonymous>:95:21)(env: macOS,mp,1.05.2105170; lib: 2.19.1)
_tarojs_taro__WEBPACK_IMPORTED_MODULE_1___default.a.navigateTo is not a function
at TaroElement.onClick (._src_pages_static_index.tsx:15)
at TaroElement.dispatchEvent (.._src_dom_element.ts:189)
at dispatch (.._src_dom_event.ts:107)
at .._src_dom_event.ts:119
at Object.Xf [as unstable_batchedUpdates] (_Users_jack_Desktop_git_taro-dynamic-import-weapp_node_modules_react-reconciler_cjs_react-reconciler.production.min.js:141)
at Object.batchedEventUpdates (.._src_dsl_react.ts:127)
at Ui.eventHandler [as eh] (.._src_dom_event.ts:114)
at Object.i.safeCallback (VM119 WAService.js:2)
at VM119 WAService.js:2
at Sn (VM119 WAService.js:2)(env: macOS,mp,1.05.2105170; lib: 2.19.1)
微信开发者工具：Stable 1.05.2105170
基础调试库：2.19.1
Node：v14.16.1
感谢大神的杰作
感觉这种方式绕过了微信禁止加载远程代码的限制，微信是否有办法禁掉这种加载方式？
希望项目上线了哪天不会突然就用不了了 😭
排查了半天没有发现原因，希望大佬抽空看一下，目测好像只有在react版本为16.+的时候，动态组件才生效
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.