问题背景
项目初始化流程
vue create -p dcloudio/uni-preset-vue my-project
// 之后选择默认模板(typescript)
demo:
// src/src.ts
export const a = "12345";
export const b = "b12345";
export const c = 3;
// src/src1.ts
export const aa = "a111111";
export const bb = 22222;
export const cc = 333333;
// src/demo.ts
import { a, b, c } from "@/src";
import { aa, bb, cc } from "@/src1";
export { a, b, c, aa, bb, cc };
// src/App.vue
import { a } from "./demo";
console.log("TCL: a", a);
期望的结果是 shake 掉 src/src1.ts 的代码,因为我并没有用到其中的代码。但不行。结果如下:
// 运行命令:yarn build:mp-weixin
// dist/build/mp-weixin/common/vendor.js
var r="a111111";e.aa=r;var o=22222;e.bb=o;var i=333333;e.cc=i
定位了一下发现修改 babel.config presets 即可
//babel.config.js
module.exports = {
presets: [
[
"@vue/app", // "@vue/cli-plugin-babel/preset"也行的
{
modules: false, // modules: 'commonjs' => false
useBuiltIns: process.env.UNI_PLATFORM === "h5" ? "usage" : "entry"
}
]
],
plugins
};
本以为问题解决,结果乐极生悲。当依赖components时编译又有问题。代码如下
// src/compDemo.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,
<br>check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>
// src/page/index/index.vue
<template>
<view class="content">
<image class="logo" src="../../static/logo.png"></image>
<view>
<text class="title">{{title}}</text>
</view>
<comp-demo></comp-demo>
</view>
</template>
<script lang="ts">
import Vue from 'vue';
import compDemo from "../../compDemo.vue";
export default Vue.extend({
components: {
compDemo
},
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
});
</script>
报错信息如下:
TypeError: Cannot read property 'id' of undefined
at Object.keys.forEach.name (/Users/xxxx/my-project/node_modules/@dcloudio/webpack-uni-mp-loader/lib/plugin/generate-component.js:57:15)
at Array.forEach (<anonymous>)
at generateComponent (/Users/xxxx/my-project/node_modules/@dcloudio/webpack-uni-mp-loader/lib/plugin/generate-component.js:24:25)
at Promise (/Users/xxxx/my-project/node_modules/@dcloudio/webpack-uni-mp-loader/lib/plugin/index-new.js:84:11)
at new Promise (<anonymous>)
at compiler.hooks.emit.tapPromise.compilation (/Users/xxxx/my-project/node_modules/@dcloudio/webpack-uni-mp-loader/lib/plugin/index-new.js:72:16)
at _next2 (eval at create (/Users/xxxx/my-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:17)
at _err2 (eval at create (/Users/xxxx/my-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:26:1)
at callback (/Users/xxxx/my-project/node_modules/copy-webpack-plugin/dist/index.js:77:17)
at /Users/xxxx/my-project/node_modules/copy-webpack-plugin/dist/index.js:118:24
error Command failed with exit code 1.
可以看出修改presets后,webpck-uni-mp-loader在执行时会出错
请问该如何实现tree shaking呢?
版本信息
"@dcloudio/uni-app-plus": "^2.0.0-23720191024001",
"@dcloudio/uni-h5": "^2.0.0-23720191024001",
"@dcloudio/uni-helper-json": "*",
"@dcloudio/uni-mp-alipay": "^2.0.0-23720191024001",
"@dcloudio/uni-mp-baidu": "^2.0.0-23720191024001",
"@dcloudio/uni-mp-qq": "^2.0.0-23720191024001",
"@dcloudio/uni-mp-toutiao": "^2.0.0-23720191024001",
"@dcloudio/uni-mp-weixin": "^2.0.0-23720191024001",
"@dcloudio/uni-stat": "^2.0.0-23720191024001",
"@babel/plugin-syntax-typescript": "^7.2.0",
"@dcloudio/types": "*",
"@dcloudio/uni-cli-shared": "^2.0.0-23720191024001",
"@dcloudio/uni-template-compiler": "^2.0.0-23720191024001",
"@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.0-23720191024001",
"@dcloudio/vue-cli-plugin-uni": "^2.0.0-23720191024001",
"@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.0-23720191024001",
"@dcloudio/webpack-uni-mp-loader": "^2.0.0-23720191024001",
"@dcloudio/webpack-uni-pages-loader": "^2.0.0-23720191024001",
"@vue/cli-plugin-babel": "3.5.1",
"@vue/cli-plugin-typescript": "^3.5.1",
"@vue/cli-service": "^4.0.0",
0 个回复