webpack ts-loader for dropdowntreeviewModule之后的意外令牌`export'

Question

我试图将AnuluR2 treeview模块插入我的测试应用程序，但是获得错误意外令牌

'从'....//filepath .....

我知道这是将打字稿文件转移到JS的问题，但是我只会将此错误纳入此特定的TreeView模块。

我已经尝试了ts-loader和babel，但不起作用。

下面是我的webpack config。

var WriteFilePlugin = require('write-file-webpack-plugin');
var path = require("path");
var APP_DIR = path.resolve(__dirname, "app");
var config = {
    entry: path.resolve(APP_DIR + "/main.ts"),
    output: {
        path: APP_DIR,
        publicPath: "/app/",
        filename: "bundle.js"
    },
    watch: true,
    resolve: {
        extensions: ['', '.webpack.js', ".web.js", ".ts", ".js", ".jsx"]
    },
    module: {
        loaders: [
            {
                test: /.tsx?$/,
                loader:"babel!ts-loader",
                //loader:"ts-loader", // tried this also
                exclude: "node_modules"
            }
        ]
    }
}
module.exports = config;

和TSCONFIG：

{
  "compilerOptions": {
    "target": "es6", //(also tried with "target:es5")
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "lib": [
      "es6",
      "dom"
    ]
  },
  "typeRoots": [
    "node_modules/@types"
  ],
  "types": [
    "core-js",
    "hammerjs",
    "lodash"
  ],
  "exclude": [
    "node_modules"
  ]
}

我所有其他导入和创建的模块都在起作用，除此之外。

让我知道，我在这里缺少什么？谢谢

Answer 1

我使用ng2-translate遇到了同样的麻烦。

在我的WebPack配置文件中，我将JS文件定为模块中，并使用Babel-Loader加载了这些文件，并应用了transform-es2015-modules-commonjs插件。您将需要更改test零件以匹配TreeView Module路径：

{
  test: /ng2-translate(?:/|\).*.js$/,
  loader: "babel-loader",
  query: {
    "plugins": ["transform-es2015-modules-commonjs"]
  }
}

请注意，只有js文件是针对的，因为您没有真正导入ts文件，只使用TS编译器的定义。

还请注意，我也做过了这一更改，但我不记得为什么确切，我想它可能打破了Sourcemap：

{
  // basically this enable source-mapping for everything except this module
  test: /(?:(?!ng2-translate(?:/|\).*)).js$/,
  loaders: ["source-map-loader"]
},

Answer 2

我尝试了几个ES6加载程序来减轻转移问题，但实际上是出口库本身。因此，以下1行解决了我的问题。

import {DropdownTreeviewModule} from 'ng2-dropdown-treeview/bundles/ng2-dropdown-treeview.umd';

而不是从ng2-dropdown-treeview导入模块，我必须从捆绑文件中导入它。