如何从这个项目中删除凉亭,并使用requirejs和纱线(noob)?
问题描述:
如何切换此以避免使用凉亭?如何从这个项目中删除凉亭,并使用requirejs和纱线(noob)?
我第一次安装了yeoman,knockoutjs的发电机使用了凉亭。现在我读了bower的支持是有限的,bootstrap使用了popper.js,它在v2中会弃用对bower的支持。我想现在避免头痛并同时学习。
RequireJS和每个客户端库在/src/bower_modules
。
如果我使用npm或纱线安装bootstrap,它会将它们安装在浏览器无法访问的/node_modules
中。 然后我使用gulp将dist文件夹传输到我的/src/bower_modules
文件夹中吗?
文件夹结构:
/src/
|--bower_modules/
|--app/
|--require.config.js
/node_modules/
/gulpfile.js
gulpfile.js:
var requireJsRuntimeConfig = vm.runInNewContext(fs.readFileSync('src/app/require.config.js') + '; require;'),
requireJsOptimizerConfig = merge(requireJsRuntimeConfig, {
out: 'scripts.js',
baseUrl: './src',
name: 'app/startup',
paths: {
requireLib: 'bower_modules/requirejs/require'
},
include: [
'requireLib',
'components/nav-bar/nav-bar',
'components/home-page/home',
'text!components/about-page/about.html'
],
insertRequire: ['app/startup'],
bundles: {
// If you want parts of the site to load on demand, remove them from the 'include' list
// above, and group them into bundles here.
// 'bundle-name': [ 'some/module', 'another/module' ],
// 'another-bundle-name': [ 'yet-another-module' ]
}
}),
transpilationConfig = {
root: 'src',
skip: ['bower_modules/**', 'app/require.config.js'],
babelConfig: {
modules: 'amd',
sourceMaps: 'inline'
}
},
babelIgnoreRegexes = transpilationConfig.skip.map(function(item) {
return babelCore.util.regexify(item);
});
应用程序/ require.config.js:
var require = {
baseUrl: ".",
paths: {
"bootstrap": "bower_modules/bootstrap/js/bootstrap.min",
"crossroads": "bower_modules/crossroads/dist/crossroads.min",
"hasher": "bower_modules/hasher/dist/js/hasher.min",
"popper": "bower_modules/popper.js/dist/popper",
"jquery": "bower_modules/jquery/dist/jquery",
"knockout": "bower_modules/knockout/dist/knockout",
"knockout-projections": "bower_modules/knockout-projections/dist/knockout-projections",
"signals": "bower_modules/js-signals/dist/signals.min",
"text": "bower_modules/requirejs-text/text"
},
shim: {
"bootstrap": { deps: ["popper", "jquery"] }
}
};
旁注:问题的起源是我似乎需要popper bootstrap和bootstrasp.bundle不包含在bower版本中。波普尔也不喜欢凉亭,并且不会支持很长时间。我也有多个错误试图包含它。我也想学习这个好方法,既然凉亭不会很久,我不介意不用它。
答
Bower自己最近发布了一条关于这个的博客:https://bower.io/blog/2017/how-to-migrate-away-from-bower/。 这里的关键外卖:
- 手动移动任何套餐从
bower.json
到package.json
可用来自鲍尔和NPM - 对于只能通过鲍尔任何物品,你可以使用bower-away NPM包安装这些与NPM代替鲍尔
- 写任务运行脚本(格朗特/咕嘟咕嘟的/ etc ...)移动包(一个或多个)文件(S)到您的
dist
目录
舒美特像这样的兴奋应该这样做。
gulp.task('injectNpmPackages', function() { return gulp.src([ path.join('/node_modules/my-package/build/my-package.min.js') ]) .pipe(gulp.dest('/dist/vendor/')); });