本文介绍了ava动态语法导入启用支持的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在我的ava配置中启用动态导入语法.我发现该主题的标准配置(和其他配置)不起作用 ava:SyntaxError:意外令牌导入.我的项目真的很简单
I'm trying to enable dynamic import syntax in my ava config.I found that standard configuration (and other) from this subject doesn't work ava: SyntaxError: Unexpected token import.My project is really simple
.
├── package.json
├── router
│ └── index.js
├── test
│ ├── order
│ │ └── actions.spec.js
│ └── setup.js
├── utils.js
├── webpack.config.ava.js
├── webpack.config.js
└── yarn.lock
package.json-许多库尚未使用，但这是更大项目的一部分，因此以后我将需要所有依赖项
package.json -many libs are not used yet but It's a part of bigger project so I'll need all dependencies later
{
"name": "ava_test_project",
"version": "11.0.0",
"description": "",
"author": "My corpo.",
"devDependencies": {
"@ava/babel-preset-stage-4": "^1.1.0",
"autoprefixer": "^7.1.6",
"ava": "1.0.0-beta.4",
"babel-core": "6.26.0",
"babel-eslint": "8",
"babel-loader": "^7.1.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-webpack-alias": "^2.1.2",
"babel-preset-env": "1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-stage-3": "^6.24.1",
"babel-register": "^6.26.0",
"css-loader": "0.28.7",
"eslint": "4.x",
"eslint-loader": "^2.1.0",
"file-loader": "1.1.6",
"imports-loader": "0.7.1",
"jsdom": "11.9.0",
"jsdom-global": "^3.0.2",
"lodash": "4.17.4",
"mini-css-extract-plugin": "^0.4.1",
"minifyify": "7.3.3",
"node-sass": "^4.7.2",
"nyc": "^12.0.2",
"postcss": "^6.0.14",
"postcss-easy-import": "^3.0.0",
"postcss-flexbugs-fixes": "^3.2.0",
"postcss-lazy-rules": "github:2createstudio/postcss-lazy-rules",
"postcss-loader": "^2.0.8",
"postcss-sprites": "^4.2.0",
"postcss-url": "^7.2.1",
"postcss-utilities": "^0.7.0",
"require-extension-hooks": "^0.3.2",
"require-extension-hooks-babel": "^0.1.1",
"require-extension-hooks-vue": "^0.4.1",
"sass-loader": "^6.0.6",
"sinon": "^4.3.0",
"style-loader": "0.19.1",
"svg4everybody": "2.1.9",
"uglifyjs-webpack-plugin": "^1.2.5",
"url-loader": "0.6.2",
"vue-loader": "^14",
"vue-moment": "3.2.0",
"vue-template-compiler": "^2.5.13",
"vue-test-utils": "^1.0.0-beta.11",
"vue2-google-maps": "^0.8.4",
"webpack": "^4.1.0",
"webpack-bundle-analyzer": "^2.9.1",
"webpack-bundle-tracker": "^0.3.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^2.9.1"
},
"dependencies": {
"axios": "^0.17.1",
"babel-plugin-istanbul": "^4.1.6",
"babel-plugin-transform-proto-to-assign": "^6.26.0",
"babel-polyfill": "^6.26.0",
"bootstrap-vue": "^2.0.0-rc.1",
"create-svg-sprite": "^1.0.4",
"jquery": "^3.3.1",
"slick-carousel": "^1.8.1",
"tap-spec": "^4.1.1",
"url-search-params-polyfill": "^4.0.0",
"v-mask": "^1.3.2",
"vee-validate": "^2.0.3",
"vue": "^2.5.13",
"vue-clip": "^1.0.0",
"vue-i18n": "^7.6.0",
"vue-lazyload": "^1.1.4",
"vue-media-queries": "^0.0.3",
"vue-multiselect": "^2.1.0",
"vue-router": "^3.0.1",
"vue-select": "^2.4.0",
"vue-tabs-component": "^1.4.0",
"vue-toasted": "^1.1.24",
"vuejs-datepicker": "^1.1.4",
"vuex": "^3.0.1",
"vuex-router-sync": "^5.0.0"
},
"ava": {
"require": [
"./test/setup.js",
"babel-polyfill",
"babel-register"
],
"files": [
"test/**/*.spec.js"
],
"babel": {
"testOptions": {
"babelrc": false,
"plugins": [
"syntax-dynamic-import"
]
}
}
},
"nyc": {
"require": [
"babel-register"
],
"reporter": [
"html",
"text",
"lcov"
],
"extension": [
".js",
".vue"
],
"sourceMap": false,
"instrument": false
},
"scripts": {
"watch": "NODE_ENV=development webpack --watch",
"build": "NODE_ENV=production webpack",
"test": "CONFIG=./webpack.config.ava.js BABEL_DISABLE_CACHE=1 NODE_ENV=test BABEL_ENV=test ava -v --color"
}
}
webpack.config.ava.js
webpack.config.ava.js
const webpack = require('webpack');
const {resolve} = require('./utils.js');
module.exports = {
resolve: {
alias: {
'@': resolve('customer-src'),
'~': resolve('dealer-src'),
'vendor-scripts': resolve('vendor-scripts'),
'common-repo': resolve('common-repo'),
'administration': resolve('admin-src'),
'jquery': 'jquery'
}
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules&importLoaders=1!postcss-loader',
},
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
}),
require("babel-plugin-syntax-dynamic-import")
],
};
在action.spec.js中，我正在尝试使用导入
In action.spec.js I'm trying to use import
const modOld = () => System.import('../../router/index.js'); //pass
const mod = () => import('../../router/index.js'); //fail
但是我得到类似的东西
Uncaught exception in test/order/actions.spec.js
/home/t/Desktop/tes/test/order/actions.spec.js:23
return import('../../router/index.js');
^^^^^^
SyntaxError: Unexpected token import
loader (node_modules/babel-register/lib/node.js:144:5)
Object.require.extensions.(anonymous function) [as .js] (node_modules/babel-register/lib/node.js:154:7)
推荐答案
使用 dynamic-import-node babel插件应该可以解决您的问题.
Transpiling with the dynamic-import-node babel plugin should resolve your issue.
这篇关于ava动态语法导入启用支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！