使用Stripe签出时，由于加载程序，获取未过期的令牌导致错误

Question

我正试图将Stripe checkout集成到VueJS应用程序中，但在应用程序编译时出现以下错误；

ERROR in ./node_modules/stripe/lib/utils.js
Module parse failed: Unexpected token (152:24)
You may need an appropriate loader to handle this file type.
|         opts.auth = args.pop();
|       } else if (utils.isOptionsHash(arg)) {
|         const params = {...args.pop()};
| 
|         const extraKeys = Object.keys(params).filter(
@ ./node_modules/stripe/lib/stripe.js 44:14-32
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/app/CMS/eCommerce/Checkout.vue
@ ./src/app/CMS/eCommerce/Checkout.vue
@ ./src/routes.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8082 webpack/hot/dev-server ./src/main.js

当我将以下变量添加到mt Checkout.vue文件时，就会发生这种情况；

从"Stripe"导入Stripe；const stripe=条纹('MYAPI'(；

这是我们的网络包文件

var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
filename: 'build.js',
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/'
},
module: {
rules: [
{
test: /.css$/,
use: [
'vue-style-loader',
'style-loader',
'css-loader'
],
},
{
test: /.html$/i,
loader: 'html-loader',
},
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]',
outputPath: 'assets/images/'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true,
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}

任何建议都很好。谢谢

Answer 1

在我看来，文件./src/app/CMS/eCommerce/Checkout.vue中似乎出了问题。

第一：变量arg和args真的存在吗？

第二：为了使语法params = {...args.pop()}工作，args必须是对象的数组

第三：你有babel配置文件吗？因为我认为你需要babel预设"@babel/preset-env"；或者一些babel插件@babel/plugin提议对象rest spread"；以及"@babel/plugintransformspread"；让babel为浏览器传输代码。。。

一个最小的babel.config.js可以是这样的：

module.exports = api => {
api.cache(true);
const presets = [];
const plugins = [];
/*
// If you want to transpile just some syntaxes manually - micromanagement
plugins.push(
[ "@babel/plugin-transform-block-scoping" ],
[ "@babel/plugin-proposal-object-rest-spread" ],
[ "@babel/plugin-transform-classes" ],
[ "@babel/plugin-transform-spread" ],
[ "@babel/plugin-transform-destructuring" ],
[ "@babel/plugin-transform-for-of" ],
[ "@babel/plugin-transform-template-literals" ],
[ "@babel/plugin-transform-arrow-functions", { spec: false } ],
);
*/

// Or let babel transpile everthing
presets.push(
[ "@babel/preset-env" ]
)
return {
presets,
plugins
}
}