如何将TypeScript转换为节点服务器的ES6 js，然后将es6.js捆绑为客户端？

Question

在迁移到TypeScript之前，我曾经在ES6中编写同构的ReactJS代码，并使用webpack --watch使用webpack --watch来处理客户端的捆绑。 但是现在有了TypeScript，我正在寻找方法，首先将TypeScript代码转换为ES6，然后触发webpack捆绑文件更改。

我使用了PhpStorm，并尝试了这种方法，但没有成功：

首先，我从PhpStorm设置了TypeScript文件监视程序，以翻译ts脚本并将其保存在./type_src/ ，

tsconfig.js

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "moduleResolution": "node",
    "removeComments": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "sourceMap": true,
    "outDir": "./type_src/",
    "jsx": "react",
    "experimentalDecorators": true,
    "noLib": false,
    "declaration": false

  },
  "exclude": [
    "node_modules",
    "type_src"
  ]
}

然后在/type_src文件夹上使用webpack --watch ：

webpack.config：

let BUILD_DIR = path.resolve(__dirname, '../../site/js/build');
let APP_DIR = path.resolve(__dirname, 'type_src');
let common = {
    output: {path: BUILD_DIR},
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                include: APP_DIR,
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
    resolve: {
        alias: {
            'react': path.join(__dirname, 'node_modules', 'react'),
            'react-dom': path.join(__dirname, 'node_modules', 'react-dom')
        },
        extensions: ['','.js','jsx','.ts','.tsx'],

    },
    exclude: [
        "node_modules",
        "typings/index.d.ts"
    ]

};

TypeScript文件监视程序正在运行，但是我无法弄清为什么即使type_src文件已被type_src更改，但webpack仍无法触发。 有人对我的情况有建议吗？

Answer 1

如果我是你，我将尝试仅使用一种工具。

例如，如果您更喜欢Webpack，则可以使用ts-loader处理打字稿文件。

或者，如果您喜欢打字稿，则可以使用outFile中的tsconfig.js生成单个捆绑文件

{
  "compilerOptions": {

    ....
    "outFile": "bundle.js"
  }
}