Comments (23)
这个 r 好像是压缩混淆后出现的一个变量,方便给下原始代码和构建配置么?我来看一下具体什么问题
from kbone.
webpack 配置
const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin')
const MpPlugin = require('mp-webpack-plugin') // 用于构建小程序代码的 webpack 插件
const mpPluginConfig = require('./miniprogram.config.js') // 插件配置
const eslintFriendlyFormatter = require('eslint-friendly-formatter')
const isOptimize = true // 是否压缩业务代码,开发者工具可能无法完美支持业务代码使用到的 es 特性,建议自己做代码压缩
module.exports = {
mode: 'production',
entry: path.resolve(__dirname, '../src/js/app.js'),
output: {
path: path.resolve(__dirname, './miniprogram/common'), // 放到小程序代码目录中的 common 目录下
filename: '[name].js', // 必需字段,不能修改
library: 'createApp', // 必需字段,不能修改
libraryExport: 'default', // 必需字段,不能修改
libraryTarget: 'window', // 必需字段,不能修改
},
target: 'web', // 必需字段,不能修改
optimization: {
runtimeChunk: false, // 必需字段,不能修改
splitChunks: { // 代码分割配置,不建议修改
chunks: 'all',
minSize: 1000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 100,
maxInitialRequests: 100,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\/]node_modules[\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
},
minimizer: isOptimize ? [
// 压缩CSS
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.(css|wxss)$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', {
discardComments: {
removeAll: true,
},
minifySelectors: false, // 因为 wxss 编译器不支持 .some>:first-child 这样格式的代码,所以暂时禁掉这个
}],
},
canPrint: false
}),
// 压缩 js
new TerserPlugin({
test: /\.js(\?.*)?$/i,
parallel: true,
})
] : [],
},
module: {
//loaders 配置。这里需要注意的是,部分在 wxss 不支持的样式需要剔除,比如 ie hack 代码,可以使用 postcss 的 stylehacks 插件剔除;对于资源文件来说,需要转成 base64 或者线上资源链接,下面是一个简单的示例:
rules: [
// eslint
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [path.resolve(__dirname, '../src')],
options: {
formatter: eslintFriendlyFormatter,
emitWarning: true,
},
},
// vue
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false,
},
},
},
// ts
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
}, {
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
happyPackMode: true,
},
}],
},
// js
{
test: /\.js$/,
loader: 'babel-loader',
options:{
cacheDirectory: true,
presets:["es2015"],
plugins: [
require.resolve('babel-plugin-transform-async-to-generator'),
require.resolve('babel-plugin-transform-object-rest-spread')
]
},
exclude:[/node_modules/],
include: [path.resolve(__dirname, '../src')],
},
// img res
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: path.posix.join('static', 'img/[name].[hash:7].[ext]'),
},
},
// media res
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: path.posix.join('static', 'media/[name].[hash:7].[ext]'),
},
},
// font res
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: path.posix.join('static', 'fonts/[name].[hash:7].[ext]'),
},
},
{
test: /\.css$/,
loader: 'css-loader'
},
{
test: /\.less$/,
use: ['css-loader', 'less-loader']
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.isMiniprogram': process.env.isMiniprogram, // 注入环境变量,用于业务代码判断
}),
new MiniCssExtractPlugin({
filename: '[name].wxss',
}),
new VueLoaderPlugin(),
new MpPlugin(mpPluginConfig),
],
}
from kbone.
mpPlugin 配置
[](
https://user-images.githubusercontent.com/17794465/71807202-ac7f9180-30a5-11ea-8319-049453270ca6.png
)
from kbone.
之前遇到过一次,可以尝试退出小程序开发者工具再进入,第一次构建npm的时候会出现,不确定是不是同一个问题
from kbone.
看配置感觉没啥问题,可以像 jayjliang 说的那样重启试试,如果还是报错,尝试将压缩混淆去掉再构建试试,看看是否还会报错?
如果还有的话请再重新贴下去掉压缩混淆后的报错和可重现代码,我这边来调试下看看
from kbone.
试过还是不行, 没有压缩之后 发现报错是parseInt 未定义
from kbone.
你这里是读了什么模块的 parseInt 方法?
from kbone.
就是javascript 全局方法。
from kbone.
我这边始终没能复现,方便给一下完整的 demo ?
如果方便对外的话可以直接放到 github 上给我,如果不方便对外的话可以打包发送到 [email protected] 这个邮箱上,然后在这里 @ 我一下。
from kbone.
@JuneAndGreen 已经发送代码包到邮箱了,麻烦及时查看。辛苦啦
from kbone.
我这边始终没能复现,方便给一下完整的 demo ?
如果方便对外的话可以直接放到 github 上给我,如果不方便对外的话可以打包发送到 [email protected] 这个邮箱上,然后在这里 @ 我一下。
已经发送代码包到邮箱了,麻烦及时查看。辛苦啦 邮件主题是github issues—— $parseInt is not a function 的报错代码包
from kbone.
你这个代码包貌似有依赖内部npm包,install 不成功。
from kbone.
把global去掉就不会parseInt 未定义了
var nativeParseInt = parseInt; var hex = /^[+-]?0[Xx]/; var FORCED = nativeParseInt(whitespaces + '08') !== 8 || nativeParseInt(whitespaces + '0x16') !== 22;
from kbone.
from kbone.
你这里似乎是调用了 getBoundingClientRect 方法,此方法在小程序里暂时没法提供同步的适配接口,看看是否是这里拿到返回值然后调用了 match ?
from kbone.
你这里似乎是调用了 getBoundingClientRect 方法,此方法在小程序里暂时没法提供同步的适配接口,看看是否是这里拿到返回值然后调用了 match ?
我是vue项目安装"vue-cli-plugin-kbone": "^0.8.0",转小程序 报错match, 不会用到小程序getBoundingClientRect
from kbone.
但是这条日志显示你确实用到了,好像是 flexable.js ?
from kbone.
from kbone.
方便给下能够跑起来的可复现问题的 demo 么?
from kbone.
@DYngng 请问是否还有问题呢?如果还有问题的话,可以提供一下已经构建好的小程序代码哈,这样我就不需要关心依赖安装不上的问题了。
from kbone.
@DYngng 请问是否还有问题呢?如果还有问题的话,可以提供一下已经构建好的小程序代码哈,这样我就不需要关心依赖安装不上的问题了。
上次看好像没有这个问题了,但是有报其他的错, 我晚些时候确认下
from kbone.
@DYngng 那我先关掉这个 issue,其他问题请新提 issue,然后我们这边再来跟进一下哈。
from kbone.
from kbone.
Related Issues (20)
- 使用moveToLocation方法问题 HOT 5
- build mp - 小程序开发工具预览失败 HOT 1
- ios真机调试报错 selector = selector.replace(regexp, onProcess) HOT 1
- npm run build,h5空白 HOT 1
- vue-cli-plugin-kbone 是不是不支持webpack5项目 HOT 2
- kbone页面节点1000左右的时候,小程序就会变卡顿吗,即使没有在setData,滑动都感觉不流畅 HOT 11
- wx-input 组件 触发input 事件的时候,没监听事件返回值,以及不会同步外部value的值。 HOT 2
- 【讨论】新的小程序组件框架 glass-easel HOT 1
- wx-button open-type="agreePrivacyAuthorization" 回调无法触发 HOT 4
- -
- 是否可以支持 Construct 3 引擎? HOT 3
- createIntersectionObserver().relativeToViewport().observe() 问题 HOT 9
- npm install的时候报错,依赖冲突了 HOT 1
- 'rimraf' 不是内部或外部命令,也不是可运行的程序 HOT 1
- kbone递归方案 HOT 1
- 使用window.$$createIntersectionObserver()页面报错异常错误
- 组件属性对齐:input 组件 auto-focus 即将弃用,需要使用 focus 替代 HOT 1
- img xhr 列表下的img的src在init的时候会把所有的图片都通过xhrget一遍,在图片列表较大的时候很影响 HOT 10
- 请问在vue3项目中使用kbone-ui的mp-navigation-bar组件时,如何绑定bindback事件? HOT 3
- 小程序内嵌视频号视频,无法加载到wx-channel-video组件 HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 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.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
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.
from kbone.