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

Question

Before migrating to TypeScript, I used to write isomorphic ReactJS code in ES6 and have webpack to handle the bundling for client side using webpack --watch . But now with TypeScript in the mix, I'm looking for ways to transpile TypeScript code to ES6 first and then trigger webpack to bundle on file change.

I use PhpStorm, and have tried this method with no success:

First I set up a TypeScript file watcher from PhpStorm to transpile ts scripts and save them in ./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"
  ]
}

then use webpack --watch on /type_src folders:

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"
    ]

};

The TypeScript file watcher is working, but I can't figure out why the webpack fails to trigger even though files in type_src have changed by the watcher. Does anyone have suggestions for my situation?

Answer 1

If I were you, I would try to use only one tool.

For example, if you prefer webpack, you can use ts-loader for processing typescript files.

Or, if you prefer typescript, you can generate single bundle file using outFile in tsconfig.js

{
  "compilerOptions": {

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