$parseInt is not a function ; 压缩后报错 thirdScriptError: r is not a function;at "pages/main/index" page lifeCycleMethod onLoad function

DYngng commented 4 years ago

在对现有vue项目转小程序时，小程序开发者工具报这个错误。 8!==r(i+"08")

JuneAndGreen commented 4 years ago

这个 r 好像是压缩混淆后出现的一个变量，方便给下原始代码和构建配置么？我来看一下具体什么问题

DYngng commented 4 years ago

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),
],

}

DYngng commented 4 years ago

mpPlugin 配置

[]( https://user-images.githubusercontent.com/17794465/71807202-ac7f9180-30a5-11ea-8319-049453270ca6.png

)

jayjliang commented 4 years ago

之前遇到过一次，可以尝试退出小程序开发者工具再进入，第一次构建npm的时候会出现，不确定是不是同一个问题

JuneAndGreen commented 4 years ago

看配置感觉没啥问题，可以像 jayjliang 说的那样重启试试，如果还是报错，尝试将压缩混淆去掉再构建试试，看看是否还会报错？

如果还有的话请再重新贴下去掉压缩混淆后的报错和可重现代码，我这边来调试下看看

DYngng commented 4 years ago

试过还是不行，没有压缩之后发现报错是parseInt 未定义

JuneAndGreen commented 4 years ago

你这里是读了什么模块的 parseInt 方法？

DYngng commented 4 years ago

就是javascript 全局方法。

JuneAndGreen commented 4 years ago

我这边始终没能复现，方便给一下完整的 demo ?

如果方便对外的话可以直接放到 github 上给我，如果不方便对外的话可以打包发送到 wx-miniprogram@qq.com 这个邮箱上，然后在这里 @ 我一下。

DYngng commented 4 years ago

@JuneAndGreen 已经发送代码包到邮箱了，麻烦及时查看。辛苦啦

DYngng commented 4 years ago

我这边始终没能复现，方便给一下完整的 demo ?

如果方便对外的话可以直接放到 github 上给我，如果不方便对外的话可以打包发送到 wx-miniprogram@qq.com 这个邮箱上，然后在这里 @ 我一下。

已经发送代码包到邮箱了，麻烦及时查看。辛苦啦邮件主题是github issues—— $parseInt is not a function 的报错代码包

JuneAndGreen commented 4 years ago

你这个代码包貌似有依赖内部npm包，install 不成功。

msdog commented 4 years ago

把global去掉就不会parseInt 未定义了 var nativeParseInt = parseInt; var hex = /^[+-]?0[Xx]/; var FORCED = nativeParseInt(whitespaces + '08') !== 8 || nativeParseInt(whitespaces + '0x16') !== 22;

msdog commented 4 years ago

但是修复parseInt 未定义问题又出现match问题

JuneAndGreen commented 4 years ago

你这里似乎是调用了 getBoundingClientRect 方法，此方法在小程序里暂时没法提供同步的适配接口，看看是否是这里拿到返回值然后调用了 match ？

msdog commented 4 years ago

你这里似乎是调用了 getBoundingClientRect 方法，此方法在小程序里暂时没法提供同步的适配接口，看看是否是这里拿到返回值然后调用了 match ？

我是vue项目安装"vue-cli-plugin-kbone": "^0.8.0",转小程序报错match, 不会用到小程序getBoundingClientRect

JuneAndGreen commented 4 years ago

但是这条日志显示你确实用到了，好像是 flexable.js ？

msdog commented 4 years ago

flexable.js是用了

------------------ 原始邮件 ------------------ 发件人: "june01"<notifications@github.com>; 发送时间: 2020年2月24日(星期一) 中午11:01 收件人: "wechat-miniprogram/kbone"<kbone@noreply.github.com>; 抄送: "settimeout"<451652176@qq.com>; "Comment"<comment@noreply.github.com>; 主题: Re: [wechat-miniprogram/kbone] $parseInt is not a function ; 压缩后报错 thirdScriptError: r is not a function;at "pages/main/index" page lifeCycleMethod onLoad function (#63)

但是这条日志显示你确实用到了，好像是 flexable.js ？

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

JuneAndGreen commented 4 years ago

方便给下能够跑起来的可复现问题的 demo 么？

JuneAndGreen commented 4 years ago

@DYngng 请问是否还有问题呢？如果还有问题的话，可以提供一下已经构建好的小程序代码哈，这样我就不需要关心依赖安装不上的问题了。

DYngng commented 4 years ago

@DYngng 请问是否还有问题呢？如果还有问题的话，可以提供一下已经构建好的小程序代码哈，这样我就不需要关心依赖安装不上的问题了。上次看好像没有这个问题了，但是有报其他的错，我晚些时候确认下

JuneAndGreen commented 4 years ago

@DYngng 那我先关掉这个 issue，其他问题请新提 issue，然后我们这边再来跟进一下哈。

wuweikd commented 2 years ago

所以怎么解决的

Tencent / kbone

$parseInt is not a function ; 压缩后报错 thirdScriptError: r is not a function;at "pages/main/index" page lifeCycleMethod onLoad function #63

webpack 配置

mpPlugin 配置