当我尝试将我的角度项目从TS编译为JS时，我遇到了一些问题。使用gulp-typescript进行编译有效但Webpack应该用作现有gulp任务的替代
执行后：
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
///<reference path="../../typings/index.d.ts" />
///<reference path="a/b.module.ts"/>
///<reference path="c/D.module.ts"/>
///<reference path="e/f.module.ts"/>
///<reference path="g/h.module.ts"/>
///<reference path="y/x.module.ts"/>
var app;
(function (app) {
'use strict';
angular.module('app', ['ngDisableScroll', 'ng.deviceDetector', 'app.testRoutes', 'app.core', 'app.blocks.modifyScale', 'app.layout', 'app.main').run(app.watchForResizeEvent).run(app.watchForChangeVisibilityEvent);
})(app || (app = {}));
/***/ })
/******/ ]);
我得到一个包含以下内容的javascript输出文件：
var path = require("path");
module.exports = {
entry: "./src/app/index.module.ts",
output: {
filename: "[name].[hash].bundle.js",
path: path.resolve(__dirname, "dist/scripts/")
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".webpack.js", ".web.js"]
},
module: {
loaders: [
{
test: /\.tsx?$/,
exclude: "node_modules",
loader: ["babel-loader", "ts-loader"]
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
}
]
}
};
看起来有些东西错过配置！
我的配置：
webpack.config.js
{
// https://www.typescriptlang.org/docs/handbook/compiler-options.html
"compilerOptions": {
"sourceMap": false,
"target": "es5",
"typeRoots": ["./node_modules/@types"]
},
"include": [
"./src/**/*"
],
"exclude": [
"node_modules/",
"**/*.mock.ts",
"**/*.spec.ts"
]
}
tsconfig.json
{
"globalDependencies": {
"angular": "registry:dt/angular#1.5.0+20160922195358",
"angular-animate": "registry:dt/angular-animate#1.5.0+20160709061515",
"angular-cookies": "registry:dt/angular-cookies#1.4.0+20160317120654",
"angular-material": "registry:dt/angular-material#1.1.0-rc5.0+20160923175937",
"angular-mocks": "registry:dt/angular-mocks#1.5.0+20160608104721",
"angular-resource": "registry:dt/angular-resource#1.5.0+20160914132003",
"angular-sanitize": "registry:dt/angular-sanitize#1.3.0+20160930125720",
"angular-scroll": "registry:dt/angular-scroll#0.0.0+20160317120654",
"angular-translate": "registry:dt/angular-translate#2.4.0+20160729132354",
"angular-ui-router": "registry:dt/angular-ui-router#1.1.5+20160810191828",
"angulartics": "registry:dt/angulartics#0.20.2+20160317120654",
"createjs-lib": "registry:dt/createjs-lib#0.0.0+20160317120654",
"easeljs": "registry:dt/easeljs#0.8.0+20160919062420",
"es6-promise": "registry:dt/es6-promise#0.0.0+20160726191732",
"jasmine": "registry:dt/jasmine#2.5.0+20161003201800",
"jquery": "registry:dt/jquery#1.10.0+20160929162922",
"ngstorage": "registry:dt/ngstorage#0.3.10+20160711132043",
"tweenjs": "registry:dt/tweenjs#0.6.0+20160317120654",
"underscore": "registry:dt/underscore#1.8.3+20160908111004"
}
}
typings.json
{
"name": "abc",
"version": "3.33.1-SNAPSHOT",
"private": true,
"dependencies": {},
"scripts": {
"test": "gulp test"
},
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"browser-sync": "~2.11.1",
"browser-sync-spa": "~1.0.3",
"chalk": "~1.0.0",
"concat-stream": "~1.5.0",
"del": "~1.2.0",
"event-stream": "^3.3.4",
"gulp": "~3.9.0",
"gulp-angular-templatecache": "~1.6.0",
"gulp-autoprefixer": "~2.3.1",
"gulp-bump": "^1.0.0",
"gulp-concat": "~2.5.2",
"gulp-css-url-adjuster": "^0.2.3",
"gulp-csso": "~1.0.0",
"gulp-dom": "^0.9.0",
"gulp-filter": "~2.0.2",
"gulp-flatten": "~0.0.4",
"gulp-gzip": "^1.2.0",
"gulp-inject": "~1.3.1",
"gulp-jshint": "~1.11.0",
"gulp-less": "~3.0.3",
"gulp-load-plugins": "~0.10.0",
"gulp-manifest": "^0.1.1",
"gulp-minify-html": "~1.0.3",
"gulp-ng-annotate": "~1.0.0",
"gulp-ng-config": "^1.2.1",
"gulp-rename": "^1.2.2",
"gulp-replace": "~0.5.3",
"gulp-rev": "~5.0.0",
"gulp-rev-replace": "~0.4.2",
"gulp-size": "~1.2.1",
"gulp-sourcemaps": "~1.5.2",
"gulp-tslint": "^4.3.3",
"gulp-typescript": "~3.0.2",
"gulp-typings": "^2.0.4",
"gulp-uglify": "~1.2.0",
"gulp-useref": "~1.2.0",
"gulp-util": "~3.0.5",
"gulp-wrap": "^0.11.0",
"http-proxy-middleware": "~0.0.5",
"jasmine-core": "^2.4.1",
"jshint-stylish": "~2.0.0",
"karma": "^0.13.3",
"karma-chrome-launcher": "^0.2.1",
"karma-coverage": "^0.4.2",
"karma-jasmine": "^0.3.7",
"karma-junit-reporter": "^0.3.2",
"karma-ng-html2js-preprocessor": "~0.1.2",
"karma-phantomjs-launcher": "^1.0.0",
"lodash": "~3.9.3",
"main-bower-files": "~2.8.0",
"merge-stream": "~0.1.7",
"phantomjs-prebuilt": "^2.1.3",
"require-dir": "~0.3.0",
"stream-series": "^0.1.1",
"tslint": "^3.6.0",
"ts-loader": "^2.3.1",
"typescript": "~2.0.3",
"uglify-save-license": "~0.4.1",
"webkit-assign": "^1.3.0",
"webpack": "2.2.0",
"wiredep": "~2.2.2",
"wrench": "~1.5.8",
"yargs": "^3.15.0"
},
"engines": {
"node": ">=0.10.0"
}
}
的package.json
table-layout:fixed