Git Product home page Git Product logo

Comments (23)

JuneAndGreen avatar JuneAndGreen commented on June 2, 2024

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

from kbone.

DYngng avatar DYngng commented on June 2, 2024

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.

DYngng avatar DYngng commented on June 2, 2024

mpPlugin 配置

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

)

from kbone.

jayjliang avatar jayjliang commented on June 2, 2024

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

from kbone.

JuneAndGreen avatar JuneAndGreen commented on June 2, 2024

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

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

from kbone.

DYngng avatar DYngng commented on June 2, 2024

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

from kbone.

JuneAndGreen avatar JuneAndGreen commented on June 2, 2024

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

from kbone.

DYngng avatar DYngng commented on June 2, 2024

就是javascript 全局方法。

from kbone.

JuneAndGreen avatar JuneAndGreen commented on June 2, 2024

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

如果方便对外的话可以直接放到 github 上给我,如果不方便对外的话可以打包发送到 [email protected] 这个邮箱上,然后在这里 @ 我一下。

from kbone.

DYngng avatar DYngng commented on June 2, 2024

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

from kbone.

DYngng avatar DYngng commented on June 2, 2024

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

如果方便对外的话可以直接放到 github 上给我,如果不方便对外的话可以打包发送到 [email protected] 这个邮箱上,然后在这里 @ 我一下。

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

from kbone.

JuneAndGreen avatar JuneAndGreen commented on June 2, 2024

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

from kbone.

msdog avatar msdog commented on June 2, 2024

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

from kbone.

msdog avatar msdog commented on June 2, 2024

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

from kbone.

JuneAndGreen avatar JuneAndGreen commented on June 2, 2024

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

from kbone.

msdog avatar msdog commented on June 2, 2024

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

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

from kbone.

JuneAndGreen avatar JuneAndGreen commented on June 2, 2024

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

from kbone.

msdog avatar msdog commented on June 2, 2024

from kbone.

JuneAndGreen avatar JuneAndGreen commented on June 2, 2024

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

from kbone.

JuneAndGreen avatar JuneAndGreen commented on June 2, 2024

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

from kbone.

DYngng avatar DYngng commented on June 2, 2024

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

from kbone.

JuneAndGreen avatar JuneAndGreen commented on June 2, 2024

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

from kbone.

wuweikd avatar wuweikd commented on June 2, 2024

所以怎么解决的
image
image

from kbone.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.