[英]Typescript and webpack
我在使用webpack和打字稿时遇到了一些困难。 我的项目中不同文件夹中有许多.ts文件。 之前我没有使用诸如commonjs或AMD之类的模块系统,而是使用了打字稿命名空间(模块关键字)。 这些文件未串联到单个文件中。 这意味着将在每个.ts文件.js文件附近生成文件,然后将所有.js文件包含在HTML中。
现在,我尝试使用webpack和ts-loader。
module.exports = {
context: __dirname,
entry: "app.ts",
output: {
path: __dirname,
filename: 'bundle.js'
},
resolve: {
root: __dirname,
extensions: ["", ".webpack.js", ".web.js", ".js",".ts", ".tsx"]
},
module: {
loaders: [
{
test: /\.tsx?$/,
loader: 'ts-loader'
}
]
}
}
在bundle.js文件中编译后,我只能找到app.ts编译的内容,而不能找到所有其他文件。 据我了解,这是因为我没有使用import关键字。 Webpack ts-loader仅编译作为模块的那些文件。 如果我启动打字稿编译器,它将像以前一样编译项目中的所有文件。
问题是:如何在bundle.js中添加所有打字稿文件,即使它们不是commonjs模块也是如此? 谢谢。
不知道您将能够获得不使用CJS或UMD的模块,但是也许我不理解这个问题? 如果您只是想串联并捆绑ts,tsx文件(无论是否导入)并且基于扩展名,则可以将ExtractTextPlugin与相应的加载器一起使用。 这样的事情可能会起作用。
module: {
loaders: [
{
test: /\.tsx?$/,
loader: ExtractTextPlugin.extract('ts-loader')
}
]
},
plugins: [
new ExtractTextPlugin('typescript.[chunkhash].js', {
disable: false,
allChunks: true // extract all ts
}),
这是文档 。
我想您实际上不需要webpack。 您只需使用“ files”属性定义tsconfig.json,然后“ tsc”就可以完成您需要的所有工作。
{
"compilerOptions": {
"target": "es6",
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"allowJs": true,
"outDir": "build"
},
"exclude": ["node_modules"],
"files": ["typings/index.d.ts", "entry.ts", "file1.ts", "file2.ts" , .... ]
}
您还可以将“ compilerOptions.module”配置为“ amd”,“ none”,“ umd”,“ commonjs” ...以设置模块加载。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.