weixin_39609500
weixin_39609500
2020-11-28 06:45

项目用ali-oss之后以webpack打包报错Unexpected token: name (Mime)

具体如下: ERROR in js/0_3ef0d.js from UglifyJs Unexpected token: name (Mime) [js/0_3ef0d.js:38302,8] Child html-webpack-plugin for "index.html": [0] ./~/lodash/lodash.js 540 kB {0} [built] [1] ./~/html-webpack-plugin/lib/loader.js!./index.html 3.39 kB {0} [built] [2] (webpack)/buildin/global.js 509 bytes {0} [built] [3] (webpack)/buildin/module.js 517 bytes {0} [built] Child extract-text-webpack-plugin: [0] ./~/css-loader/lib/css-base.js 2.19 kB {0} [built] [1] ./~/base64-js/index.js 3.47 kB {0} [built] [2] ./~/buffer/index.js 48.6 kB {0} [built] [3] ./~/buffer/~/isarray/index.js 132 bytes {0} [built] [4] ./~/css-loader!./~/normalize.css/normalize.css 8.35 kB {0} [built] [5] ./~/ieee754/index.js 2.05 kB {0} [built] [6] (webpack)/buildin/global.js 509 bytes {0} [built] Child extract-text-webpack-plugin: [0] ./src/layouts/fonts/icomoon.eot?keomgw 2.47 kB {0} [built] [1] ./~/css-loader/lib/css-base.js 2.19 kB {0} [built] [2] ./src/layouts/fonts/icomoon.ttf?keomgw 2.24 kB {0} [built] [3] ./src/layouts/fonts/icomoon.woff?keomgw 2.34 kB {0} [built] [4] ./src/layouts/fonts/icomoon.svg?keomgw 2.7 kB {0} [built] [5] ./~/base64-js/index.js 3.47 kB {0} [built] [6] ./~/buffer/index.js 48.6 kB {0} [built] [7] ./~/buffer/~/isarray/index.js 132 bytes {0} [built] [8] ./~/css-loader?{"importLoaders":1,"module":true,"sourceMap":true,"localIdentName":"[name]_[local]_[hash:base64:5]"}!./~/postcss-loader!./~/less-loader/dist/cjs.js!./src/layouts/less/base.less 13 kB {0} [built] [9] ./~/ieee754/index.js 2.05 kB {0} [built] [10] (webpack)/buildin/global.js 509 bytes {0} [built] npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! tongyoushu.0.0 build:cross-env NODE_ENV=production webpack --config config/webpack.config.pro.jsnpm ERR! Exit status 2 npm ERR! npm ERR! Failed at the tongyoushu.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

看了code,是引入shims/mime.js 的class Mime的时候报错。。这个问题请问怎么解决呢?

该提问来源于开源项目:ali-sdk/ali-oss

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

5条回答

  • weixin_39675289 weixin_39675289 5月前

    可以看下example下面的webpack.config,加个babel-loader暂时。后面我处理下,提供es5版本的mime

    点赞 评论 复制链接分享
  • weixin_39609500 weixin_39609500 5月前

    谢谢回复~依照所说加入了babel-loader,不会再报Mime的错误,但是又产生另外1个错误: ERROR in js/0_cb2f2.js from UglifyJs Unexpected token operator «*», expected punc «(» [js/0_cb2f2.js:57526,26] Child html-webpack-plugin for "index.html": [0] ./~/lodash/lodash.js 540 kB {0} [built] [1] ./~/html-webpack-plugin/lib/loader.js!./index.html 3.39 kB {0} [built] [2] (webpack)/buildin/global.js 509 bytes {0} [built] [3] (webpack)/buildin/module.js 517 bytes {0} [built] Child extract-text-webpack-plugin: [0] ./~/css-loader/lib/css-base.js 2.19 kB {0} [built] [1] ./~/base64-js/index.js 3.47 kB {0} [built] [2] ./~/buffer/index.js 48.6 kB {0} [built] [3] ./~/buffer/~/isarray/index.js 132 bytes {0} [built] [4] ./~/css-loader!./~/normalize.css/normalize.css 8.35 kB {0} [built] [5] ./~/ieee754/index.js 2.05 kB {0} [built] [6] (webpack)/buildin/global.js 509 bytes {0} [built] Child extract-text-webpack-plugin: [0] ./src/layouts/fonts/icomoon.eot?keomgw 2.47 kB {0} [built] [1] ./~/css-loader/lib/css-base.js 2.19 kB {0} [built] [2] ./src/layouts/fonts/icomoon.ttf?keomgw 2.24 kB {0} [built] [3] ./src/layouts/fonts/icomoon.woff?keomgw 2.34 kB {0} [built] [4] ./src/layouts/fonts/icomoon.svg?keomgw 2.7 kB {0} [built] [5] ./~/base64-js/index.js 3.47 kB {0} [built] [6] ./~/buffer/index.js 48.6 kB {0} [built] [7] ./~/buffer/~/isarray/index.js 132 bytes {0} [built] [8] ./~/css-loader?{"importLoaders":1,"module":true,"sourceMap":true,"localIdentName":"[name]_[local]_[hash:base64:5]"}!./~/postcss-loader!./~/less-loader/dist/cjs.js!./src/layouts/less/base.less 13 kB {0} [built] [9] ./~/ieee754/index.js 2.05 kB {0} [built] [10] (webpack)/buildin/global.js 509 bytes {0} [built] 类似这种错误实在无法定位准确,很苦恼。去掉oss的调用就没有这个错误了。。请问您有什么建议吗? 或者,有没有什么好的方式,能令es6 组件(用的react+ant design)直接require到es5 方式的aliyun-oss-sdk.min.js 文件? 我尝试去掉node_modules中的ali-oss, 而在index.html的head中加了
    <script type="text/javascript" src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script> ,然后在使用oss的地方 const OSS_Lib = require('ali-oss'); 是无法引用正确的。。。求建议

    点赞 评论 复制链接分享
  • weixin_39675289 weixin_39675289 5月前

    第一个问题看样子是你的代码压缩的时候 没有先进行转换generator。 第二种方式的话,直接用 window.OSS 试下,不要用require了。

    点赞 评论 复制链接分享
  • weixin_39609500 weixin_39609500 5月前

    转换generator能说详细点不? 目前webpack的配置如下: `const webpack = require("webpack"); const merge = require("webpack-merge"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const cleanWebpackPlugin = require("clean-webpack-plugin"); const optimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const path = require("./path");//配置具体地址

    let HtmlWebpackPlugin = require("html-webpack-plugin");

    module.exports = { resolve:{ modules: ['node_modules', path.node_modules], extensions: ['.web.js','.js','.less','.json'], alias:{ 'layouts':path.layouts, 'utils':path.utils, 'components':path.components, } }, entry:{ index:[path.index], vendor: [ 'react', 'react-redux', 'react-router-dom', 'react-router-redux', 'react-dom', 'redux', 'querystring','n-zepto','antd-mobile' ] }, output:{ path:path.dist, filename:"js/[name]_[hash:5].js", crossOriginLoading:"anonymous", }, devtool:"cheap-module-source-map",

    module:{
        rules:[
            {
                test:/\.(js|jsx)$/,
                include:[
                    path.app
                ],
                exclude:[
                    path.node_modules
                ],
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:[
                            ['es2015',{"modules":false}],
                            "stage-0",
                            'react'
                        ],
                        "plugins":[
                            "transform-decorators-legacy",
                            'transform-runtime',
                            ["import",[{"libraryName":"antd-mobile", style:true}]],
                            "react-hot-loader/babel"
                        ]
                    }
                }
            },
        {
                test: /\.js$/,
                include:[
                    path.ali_oss  //"./node_modules/ali-oss"
                ]  ,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            },
    
            {
              test:/\.(woff|woff2|ttf|eot)($|\?)/,
              include:[path.layouts],
              use: ['url-loader?limit=8192&name=fonts/[hash:8].[name].[ext]']
            },
            {
                test: /\.(png|svg|jpg)$/,
                include:[path.layouts],
                use: ['url-loader?limit=8192&name=images/[hash:8].[name].[ext]']
            },
            {    
            test: /\.(svg)$/i,
            loader: 'svg-sprite-loader',
            include: [
              require.resolve('antd-mobile').replace(/warn\.js$/, ''),
            ],
          }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:"tys",
            inject:"body",
            filename:"index.html",
            template:path.template
        }),
        new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
          filename: 'script/[name].[hash:8].js'
        }),
        new webpack.LoaderOptionsPlugin({
            options:{
                postcss:function () {
                    return [
                        require("autoprefixer")({
                            browsers: [
                                '>1%',
                                'last 4 versions',
                                'Firefox ESR',
                                'not ie < 9'
                            ]
                        }),
                        require("postcss-pxtorem")({
                          rootValue: 100,
                          propWhiteList: []
                        })
                    ]
                }
            }
        }),
    new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production')
            }
        }),
        new optimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { discardComments: {removeAll: true } },
            canPrint: true
        }),
        new webpack.optimize.UglifyJsPlugin({//压缩 必须是production环境
            compress:{
                warnings:false,
                drop_console:false
            }
        }),
        new cleanWebpackPlugin(['dist'],{
            root:path.root,
            "verbose": true,
        }),
        new ExtractTextPlugin({
            filename:"css/[name].[contenthash:5].css",
        })
    
    ]
    

    };

    `

    点赞 评论 复制链接分享
  • weixin_39675289 weixin_39675289 5月前

    entry 文件里面只写 require('ali-oss')看下能否构建出来

    点赞 评论 复制链接分享