Typescript模块放到单个JS文件中
Typescript Modules Into Single JS file?
好吧,我完全迷路了。我刚开始在Grunt JS中使用Typescript,需要一些帮助。
我有一个工作的Grunt文件,它运行我的TS,然后是一个网站准备文件的丑化过程,这是配置:
ts: {
default: {
files: {
'/js/builds/main.js': ['/typescript/main/build.ts'],
'/js/builds/public.js': ['/typescript/public/build.ts']
}
},
options: {
target: 'ES5',
fast: 'never',
sourceMap: false,
allowJs: true,
declaration: false,
module: 'amd'
},
},
'uglify': {
options: {
preserveComments: 'some',
},
my_target: {
files: {
'src/js/main.js': ['/js/builds/main.js'],
'src/js/public.js': ['/js/builds/public.js']
}
}
},
watch: {
'JS': {
files: [
'/js/**/*.js',
'/typescript/**/*.ts',
'/typescript/**/**/*.ts'
],
tasks: ['ts', 'uglify'],
options: {
spawn: false,
},
}
}
所以现在我正在处理我的Typescript文件,但是我有很多问题,我想使用Typescript作为一个模块系统,但要输出到一个文件,现在它设置为AMD,这需要我不知道的Require JS。
现在我没有时间学习Typescript和Require JS。那么我现在得到的是什么呢,
test.js:
export class testMe {
constructor() { }
LogingData() {
console.log( 'Data being logged...' );
}
}
然后在我的构建文件中,
import {testMe} from "./clients/clients";
然而,这需要需要JS或模块加载系统,以使其运行?我尝试过使用commonJs,但似乎在Typescript 1.8中删除了对它的支持(我正在使用2.0)。
那么我如何把我的Grunt/Typescript变成一个单一的标准ES5编译代码,而使用Typescript模块?
多谢
更新这个问题&答:Typescript编译成单个文件并没有给出如何设置grunt在单个文件中使用Typescript的答案!另外,答案指出Typescript 1.8+将解决这个问题-但我正在使用的版本没有。
我使用Grunt将TS代码编译成一个标准javascript文件,而不使用System或Require JS。所以我可以在HTML代码中使用它。
最终目标是有两个单独的文件。为了解释这一点,我有很多单独的.ts文件用于两个部分,一个主要部分和另一个公共部分——我没有在公共部分工作,只有主要部分,所以我所有的测试都在那个部分。
所以布局我的文件/文件夹路径:
js/
builds/
main.js < targer end file
public.js <- target end file
typescript
main/
settings/
classA.ts
somethingelse.ts
othersection/
something.ts
buildMain.ts <- *1
*1这个文件然后通过导入(不确定这是否正确)获取所有的ts文件,然后构建完整的标准单个.js文件。
我希望这能更详细地解释我的问题。
感谢更新2:我只是想补充说,我得到一个单一的文件,例如main.js,但这不是一个标准的Javascript编译文件。我不想使用Require JS或任何其他外部模块加载系统。
我想使用外部。ts文件有模块导入它们到一个"构建"文件,并有该文件编译成一个标准的自包含的javascript文件,而不需要包括require js或其他任何东西。
希望能更清楚一点…
谢谢。
我相信您可以使用——outfile将所有内容放入一个文件中。诀窍是删除导入和导出语句,并在第一行使用/// <reference path="path/to/file.ts" />
来声明依赖/排序关系。因为是import/export语句产生了对CommonJS或Require的调用,所以省略它们可以防止它们的生成。
裁判:https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html
对于两个输出文件,您可能需要两个tsconfig.json。(这里我可能说错了)
如果您不打扰.d.ts
文件,您可以简单地使用--module=commonjs
(它是并将被支持)将每个文件编译成.js
,然后browserify
将所有模块连接在一起。
我使用的是CLI脚本,而不是grunt,但它应该是显而易见的:
$ ./node_modules/.bin/tsc --module commonjs main.ts
$ ./node_modules/.bin/browserify main.js -o bundle.js
然后你可以像在浏览器或CLI中使用node
一样运行它。
tsc
也有--outFile
选项,但这仅限于amd
和systemjs
模块,所以我认为坚持commonjs
和browserify
更容易。
browserify
是一个了不起的工具。您可以生成具有--standalone
参数的UMD模块,它也可以作为全局的或排除任何外部依赖。
我强烈建议你阅读官方手册:https://github.com/substack/browserify-handbook
- JS文件的路径正在消失
- 我的外部js文件无法加载
- 在不破坏未定义函数的情况下,对多个视图使用单个js文件
- 动态加载和卸载js文件
- 如何将变量传递到另一个js文件
- 如何将所有JS文件连接到一个文件夹中
- 从Chrome扩展名中的popup.html文件在background.js文件中运行一个函数
- 如何使用php文件中的GET来获取我在.js文件中声明的变量
- 如何将模板中的标记脚本移动到.js文件中
- 什么's是连接供应商js文件的最佳方式
- 如何在定义js文件后为外部javascript文件设置变量
- 如何在JS文件中获取资源(.resx)字符串
- 将*.js文件的内容放入Object中
- 如何从onclick函数设置全局变量并将其传递给另一个JS文件
- 导致内容安全策略(CSP)冲突错误的本地jquery.js文件
- 如何使用Gmail运行.js文件
- 如何定义一个模块并使用它来分离js文件
- Angular JS文件上传到托管服务器
- 如何引用HTML中节点模块中的js文件
- 如何将JS文件从其他文件夹链接到页面