Question

在迁移到TypeScript之前，我曾经在ES6中编写同构ReactJS代码，并使用webpack来使用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"
  ]
}

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

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中的文件已被观察者更改，webpack也无法触发。有没有人对我的情况有建议？

Answer 1

如果我是你，我会尝试只使用一种工具。

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

或者，如果您更喜欢打字稿，则可以使用outFile

中的tsconfig.js生成单个捆绑文件

{
  "compilerOptions": {

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

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

1 个答案: