Good day,
I would like to integrate typescript into an angularjs project which is using grunt. I'd like to do that step by step, so that one doesn't need to re-write the whole project.
The reason is to 1) increase the code quality, using typescript and linting for that. 2) introduce modularity because currently the .js file size grows and the code becomes less readable.
Currently the project uses grunt with following projects:
'clean:dist',
'clean:typescript',
'ts',
.......,
'jsbeautifier',
'less',
'useminPrepare',
'concat',
'copy:dist',
'cssmin',
'uglify',
'filerev',
'usemin',
'htmlmin'
What happens in that grunt workflow is, that the typescript part is compiled and the typescript build directory is included by the index.html file. So the 'useminPrepare',
'concat',
'copy:dist',
'cssmin',
'uglify',
'filerev',
'usemin',
workflow integrates the typescript code successfully into the vendor.js.
Currently the problem is that I get the following error when opened in the browser.
Uncaught ReferenceError: exports is not defined
Stack Overflow Problem Thread
But all advice in that thread are not removing the Object.defineProperty(exports, "__esModule", { value: true });
inside the (typescript to ) javascript compiled code.
I used <script>var exports = {};</script>
then I got the Uncaught ReferenceError: module is not defined
error. Note: I also included the <script src="bower_components/commonjs/common.js"></script>
So my assumption is that I need to get browserify between 'useminPrepare'
and
'usemin'
, but it seems that usemin doesn't support browserify.
So my questions:
Thank you so much for your help.
Cheers, Tobias
I found the answer in this question: TS1148 ~ How to "import" with --module: "none" and typescricpt 2.x
"module": "none"
<script src="xyz/build/tsc/**/*.js"></script>