如何使用 npm 脚本将 typescript 编译成 javascript 然后编译成 1 个文件
How to compile typescript into javascript then into 1 file using npm scripts
My current entire package.json file.
"scripts": {
"build": "webpack",
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"build:css": "node-sass --output-style compressed --include-path scss scss/lifeleveler.scss app/assets/css/app.css",
"build:css-expand": "node-sass --include-path scss scss/lifeleveler.scss app/assets/css/app.css",
"watch:css": "nodemon -e scss -x \"npm run build:css\"",
"watch:css:expand": "nodemon -e scss -x \"npm run build:css-expand\"",
"build:js": "browserify dist/main.js > dist/lifeleveler.app.js",
"watch": "npm run watch:css & npm run watch:js",
"watch:js": "onchange '/dist/**/*.js' -p -- npm run build:js"
},
我正在尝试使用 1 个 watch
脚本来 运行 精简版服务器,构建 .ts .js 和 .css 文件。
现在,当我编辑或制作任何新的打字稿文件时,我 systemJS
和 tsc
生成 .js 文件。
从 tsc:w
生成这些 javascript 文件后,它们最终位于 dist 文件夹中。一旦它们在那里更新,我想根据 dist.
内的 main.js 将它们 uglify 并连接到 1 lifeleveler.app.js 文件中
到目前为止,我无法正确组合上述任务..
我的文件夹目录
我也在想我的方法不对,我可以有 2 个终端 windows。 1 看 TSX -> js,另一个看 SASS->CSS.
然后在最后,当我准备好推送构建时,也许然后是我的 build:js
任务。
但是我需要替换 index.html 文件中的块,你会怎么做?
<html>
<head>
<meta charset="UTF-8">
<title>LifeLeveler</title>
<meta name="description" content="Level up in the journey of life.">
<link rel="stylesheet" href="app/assets/css/app.css">
<!-- load the dependecies -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<!-- load our angular app with systemjs -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) { console.log(err); });
</script>
<!-- <script src="dist/lifeleveler.app.js"></script> -->
</head>
<body class="container">
<my-app></my-app>
</body>
</html>
tsconfig
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"rootDir": "app/",
"outFile": "./dist/main.js",
"outDir": "dist"
},
"sourceMap": true
看看这个解决方案:https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS
重要文件:
package.json
tsconfig.json
网络包文件
应用程序模块结构
希望对您有所帮助!
您可以修改您的 tsconfig.json
:
{
"compilerOptions": {
"target": "ES5",
"rootDir": "app/",
"outFile": "./dist/main.js"
}
}
先用tsc:w
编译成一个文件,build:js
缩小到dist/lifeleveler.app.js
编辑:请注意outFile
不能与"module": "commonjs"
、
一起使用
My current entire package.json file.
"scripts": {
"build": "webpack",
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"build:css": "node-sass --output-style compressed --include-path scss scss/lifeleveler.scss app/assets/css/app.css",
"build:css-expand": "node-sass --include-path scss scss/lifeleveler.scss app/assets/css/app.css",
"watch:css": "nodemon -e scss -x \"npm run build:css\"",
"watch:css:expand": "nodemon -e scss -x \"npm run build:css-expand\"",
"build:js": "browserify dist/main.js > dist/lifeleveler.app.js",
"watch": "npm run watch:css & npm run watch:js",
"watch:js": "onchange '/dist/**/*.js' -p -- npm run build:js"
},
我正在尝试使用 1 个 watch
脚本来 运行 精简版服务器,构建 .ts .js 和 .css 文件。
现在,当我编辑或制作任何新的打字稿文件时,我 systemJS
和 tsc
生成 .js 文件。
从 tsc:w
生成这些 javascript 文件后,它们最终位于 dist 文件夹中。一旦它们在那里更新,我想根据 dist.
到目前为止,我无法正确组合上述任务..
我的文件夹目录
我也在想我的方法不对,我可以有 2 个终端 windows。 1 看 TSX -> js,另一个看 SASS->CSS.
然后在最后,当我准备好推送构建时,也许然后是我的 build:js
任务。
但是我需要替换 index.html 文件中的块,你会怎么做?
<html>
<head>
<meta charset="UTF-8">
<title>LifeLeveler</title>
<meta name="description" content="Level up in the journey of life.">
<link rel="stylesheet" href="app/assets/css/app.css">
<!-- load the dependecies -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<!-- load our angular app with systemjs -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) { console.log(err); });
</script>
<!-- <script src="dist/lifeleveler.app.js"></script> -->
</head>
<body class="container">
<my-app></my-app>
</body>
</html>
tsconfig
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"rootDir": "app/",
"outFile": "./dist/main.js",
"outDir": "dist"
},
"sourceMap": true
看看这个解决方案:https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS
重要文件: package.json tsconfig.json 网络包文件 应用程序模块结构
希望对您有所帮助!
您可以修改您的 tsconfig.json
:
{
"compilerOptions": {
"target": "ES5",
"rootDir": "app/",
"outFile": "./dist/main.js"
}
}
先用tsc:w
编译成一个文件,build:js
缩小到dist/lifeleveler.app.js
编辑:请注意outFile
不能与"module": "commonjs"
、