使用动态导入运行Webpack时出错

时间:2019-01-26 13:36:29

标签: javascript typescript webpack async-await

当我将tsconfig中的模块系统更新为commonjs时,我没有收到错误,但是文件不会加载任何内容(例如,我没有获得控制台日志)。当我从.ts文件中删除导入时,它工作正常。我想念什么吗?我也尝试过babel,但结果却相同。 (使用节点10.15.0)

更新: 该错误是由packages.json中的其他软件包引起的,除裸机minimun外,我已删除了所有软件包。尽管错误已得到解决,但在网站上加载发出的js时,我仍然没有控制台日志。

错误:

Module parse failed: Unexpected token (42:45)
You may need an appropriate loader to handle this file type.
|         return __generator(this, function (_a) {
|             switch (_a.label) {
>                 case 0: return [4 /*yield*/, import('conditioner-core/conditioner-core.esm')];
|                 case 1:
|                     conditioner = _a.sent();

Webpack配置:

const path = require("path");
const webpack = require('webpack');
const websiteRootPath = "C:\\inetpub\\wwwroot\\testsite";

module.exports = {
  entry: {
    "project-1":
      "./src/Project1/scripts/index.ts",
    "project-2":
      "./src/Project2/scripts/index.ts"
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(websiteRootPath, "assets\\webpack"),
    publicPath: "/assets/webpack/"
  },
  devtool: "source-map",
  module: {
    rules: [
      { 
        test: /\.tsx?$/, 
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'ts-loader',
        }
    },

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
    ]
  },
  resolve: {
    extensions: [".js", ".ts"]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]
};

tsconfig.json

{
    "compilerOptions": {
        "sourceMap": true,
        "module": "esnext",
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "target": "es5",
        "strict": false,
        "lib": ["es2015.promise", "dom", "es5"],
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "**/obj/**/PackageTmp/**/*"
    ]
}
packages.json中的

devDependencies:

"devDependencies": {
  "@types/jquery": "^3.3.29",
  "@types/kendo-ui": "^2018.3.0",
  "@types/node": "^10.12.18",
  "@types/webpack-env": "^1.13.6",
  "acorn": "^6.0.0",
  "ajv": "^6.7.0",
  "conditioner-core": "^2.3.1",
  "source-map-loader": "^0.2.4",
  "ts-loader": "^5.3.3",
  "typescript": "^3.1.6",
  "webpack": "^4.29.0",
  "webpack-cli": "^3.2.1",
  "webpack-merge": "^4.2.1"
}

index.ts:

console.log("before main");
async function main() {
    console.log("inside main");
    const conditioner = await import('conditioner-core/conditioner-core.esm');

    // lets go!
    conditioner.hydrate(document.documentElement);
}
main();
console.log("after main");

0 个答案:

没有答案