【发布时间】：2017-03-22 05:00:01
【问题描述】：
我正在做一个有角度的项目，并决定使用一个样板。这是样板的链接：https://github.com/jakemmarsh/angularjs-gulp-browserify-boilerplate
我面临的问题是我无法添加任何新的模块。
例如，我想通过 npm 添加 ngCart。我已经安装了它，但在代码中无法访问它。
`import angular from 'angular';
// angular modules
import constants from './constants';
import onConfig from './on_config';
import onRun from './on_run';
import 'angular-ui-router';
import 'ngCart'; //this doesn't import it
import './templates';
import './filters';
import './controllers';
import './services';
import './directives';
// create and bootstrap application
const requires = [
'ui.router',
'ngCart',
'templates',
'app.filters',
'app.controllers',
'app.services',
'app.directives'
];
// mount on window for testing
window.app = angular.module('app', requires);
angular.module('app').constant('AppSettings', constants);
angular.module('app').config(onConfig);
angular.module('app').run(onRun);
angular.bootstrap(document, ['app'], {
strictDi: true
});
我的 package.json 是
{
"name": "angularjs-gulp-browserify-boilerplate",
"version": "1.7.1",
"author": "Jake Marsh <jakemmarsh@gmail.com>",
"description": "Boilerplate using AngularJS, SASS, Gulp, and Browserify while also utilizing best practices.",
"repository": {
"type": "git",
"url": "https://github.com/jakemmarsh/angularjs-gulp-browserify-boilerplate.git"
},
"license": "MIT",
"keywords": [
"express",
"gulp",
"browserify",
"angular",
"sass",
"karma",
"jasmine",
"protractor",
"boilerplate"
],
"private": false,
"engines": {
"node": "~4.2.x"
},
"scripts": {
"dev": "cross-env NODE_ENV=development ./node_modules/.bin/gulp dev",
"build": "cross-env NODE_ENV=production ./node_modules/.bin/gulp prod",
"deploy": "cross-env NODE_ENV=production ./node_modules/.bin/gulp deploy",
"test": "cross-env NODE_ENV=test ./node_modules/.bin/gulp test",
"protractor": "cross-env NODE_ENV=test ./node_modules/.bin/gulp protractor",
"unit": "cross-env NODE_ENV=test ./node_modules/.bin/gulp unit"
},
"dependencies": {
"cross-env": "^3.1.1",
"ngCart": "1.0.0"
},
"devDependencies": {
"angular": "^1.5.0",
"angular-mocks": "^1.3.15",
"angular-ui-router": "^0.3.1",
"babel-core": "^6.3.26",
"babel-eslint": "^7.0.0",
"babel-preset-es2015": "^6.3.13",
"babel-register": "^6.5.2",
"babelify": "^7.2.0",
"brfs": "^1.2.0",
"browser-sync": "^2.7.6",
"browserify": "^13.0.0",
"browserify-istanbul": "^2.0.0",
"browserify-ngannotate": "^2.0.0",
"bulk-require": "^1.0.0",
"bulkify": "^1.1.1",
"debowerify": "^1.3.1",
"del": "^2.1.0",
"envify": "^3.4.0",
"ngCart": "^1.0.0",
"eslint": "3.7.1",
"express": "^4.13.3",
"gulp": "^3.9.0",
"gulp-angular-templatecache": "^2.0.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-changed": "^1.0.0",
"gulp-eslint": "^3.0.1",
"gulp-gzip": "^1.2.0",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^3.0.3",
"gulp-notify": "^2.0.0",
"gulp-protractor": "^3.0.0",
"gulp-rename": "^1.2.0",
"gulp-sass": "^2.0.4",
"gulp-sass-glob": "^1.0.6",
"gulp-sourcemaps": "^1.6.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.1",
"imagemin-pngcrush": "^5.0.0",
"isparta": "^4.0.0",
"karma": "^1.3.0",
"karma-browserify": "^5.0.2",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "douglasduteil/karma-coverage#next",
"karma-firefox-launcher": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-sauce-launcher": "^1.0.0",
"merge-stream": "^1.0.0",
"pretty-hrtime": "^1.0.1",
"run-sequence": "^1.1.5",
"tiny-lr": "^0.2.1",
"uglifyify": "^3.0.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0"
}
}
【问题讨论】：
-
要在客户端javascript中需要包，通常你必须将它们全部编译到一个文件中。你是怎么做到的？你能发布你的 Gulpfile.js 吗？
-
npm 是一个服务器端包管理器。
bower之类的东西可以让您更轻松地安装客户端软件包。 -
您需要安装其
tsd或@types即该模块的类型定义，以获得有关它的智能感知。也只是写 import 不会将它包含在输出 js 包中，因为它是 angular 2 -
@harishr ，我也尝试将其包含在 html 文件中。整个脚本也在我的 js 包中。但它会抛出错误。
-
好的，我会尝试并告诉你