ava dynamic syntax import enable support

问题

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 -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

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")
  ],
};

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 

but I get something like:

  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)

回答1:

Transpiling with the dynamic-import-node babel plugin should resolve your issue.

回答2:

Looks like it. dynamic-import-node is still a proposal and AVA "support all finished syntax proposals, as well as all syntax from ratified JavaScript versions (e.g. ES2017). See our @ava/stage-4(don't see dynamic-import-node listed there) preset for the currently supported proposals." - https://github.com/avajs/ava

来源：https://stackoverflow.com/questions/51729879/ava-dynamic-syntax-import-enable-support