带有 TypeScript 的 Webpack - 当以 ES6 为目标时，导入键没有定义

Question

我正在开发一个新的 Angular2 项目，使用 Webpack 作为模型加载器，使用 Typescript 作为开发语言。

当我将 Typescript 编译器定位到 ES5 时，一切正常。但是当我以 ES6 为目标并将 babel-loader 添加为 ES5 的翻译器时，我收到错误消息：Unexpected token import

工作 ES5 配置：

// tsconfig.json
"compilerOptions":
{
    "target": "es5",
    // ..
}

// webpack.config.js   
module:
    {
        loaders:
        [
            { test: /\.tsx?$/, exclude: /node_modules/, loader: "ts-loader" },
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
            // ...
        ]
    }

// app.ts
import 'core-js' // this line is transpiled by ts-comiler/loader to 'require('core-js')'

不工作 ES6 配置：

// tsconfig.json
"compilerOptions":
{
    "target": "es6",
    // ..
}

// webpack.config.js   
module:
    {
        loaders:
        [
            { test: /\.tsx?$/, exclude: /node_modules/, loader: "babel-loader!ts-loader" },
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
            // ...
        ]
    }

// app.ts
import 'core-js' // this line throw the error: Uncaught SyntaxError: Unexpected token import

我不明白为什么ES6 import关键字没有定义？？？
我还注意到，如果我将导入语句更改为 require() 语句，那么我不会收到错误，但我想使用 ES6 导入语法。

Answer 1

很好，我找到了答案。使用 babel-loader 时，您不仅需要安装 babel-loader 和 babel-core，还需要安装 babel-preset-es2015 模块。

1。运行 shell/terminal 命令：
$ npm i babel-loader -D
$ npm i babel-core -D
$ npm i babel-preset-es2015 -D

（npm i 是 npm install 的别名。-D 是 --save-dav 的别名，它将把包添加到 package.json 文件中的 devDependencies 节点）

2。编辑 webpack.config 文件：

// webpack.config.js   
module:
    {
        loaders:
        [
            { 
                test: /\.tsx?$/, 
                exclude: /node_modules/, 
                loader: "babel-loader?presets[]=es2015!ts-loader" 
            },
            { 
                test: /\.js$/, 
                exclude: /node_modules/, 
                loader: "babel-loader",
                query:
                {
                    presets: ['es2015']
                }
            },
            // ...
        ]
    }

有关如何使用 babel-loader 配置 ts-loader 的更多信息，请参阅：https://gist.github.com/nojaf/daf886031072b572bc9a

带有 TypeScript 的 Webpack - 当以 ES6 为目标时，导入键没有定义

Webpack with TypeScript - When targeting to ES6 the import keywork isn't define

typescript

ecmascript-6

webpack

babeljs

ts-loader