TypeScript

结构&目录

show.js

export function show(content: string) {
    window.document.getElementById('box').innerText = 'Hello,' + content;
}

entry.js

// 通过 ES6 模块规范导入 show 函数
import {show} from './src/show';
// 执行 show 函数
show('Webpack');

tsconfig.json

使用的编辑器是webstorm，文件内容自动生成的。 添加"importHelpers": true

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    // 从 tslib 导入辅助工具函数（比如 __extends， __rest等）
    "importHelpers": true
  },
  "exclude": [
    "node_modules"
  ]
}

webpack.config.js

module.exports = {
  module: {
    resolve: {
      // 先尝试 ts 后缀的 TypeScript 源码文件
      extensions: ['.ts', '.js'],
    },
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
      },
    ]
  },
  // 输出 source-map 方便直接调试 ES6 源码
  devtool: 'source-map'
};

resolve.extensions用于配置在尝试过程中用到的后缀列表。

安装

$ npm i typescript -d
$ npm i typescript awesome-typescript-loader -D