HTML 웹사이트에 node_modules
를 포함하는 모범 사례에 관한 질문이 있습니다.
내 node_modules
폴더 안에 부트스트랩이 있다고 가정해 보세요. 이제 웹사이트의 프로덕션 버전에 node_modules
폴더 안에 있는 부트스트랩 스크립트와 CSS 파일을 어떻게 포함할 수 있나요? 해당 폴더 안에 부트스트랩을 그대로 두고 다음과 같은 작업을 수행하는 것이 합리적일까요?
<script src="./node_modules/bootstrap/dist/bootstrap.min.js"></script>
아니면 gulp 파일에 규칙을 추가한 다음 해당 파일을 dist 폴더에 복사해야 하나요? 아니면 어떻게든 gulp가 내 HTML 파일에서 로컬 부트스트랩을 완전히 제거하고 CDN 버전으로 대체하도록 하는 것이 가장 좋을까요?
일반적으로 서버 구조에 대한 내부 경로를 외부에 노출하고 싶지 않을 것입니다. 할 수 있는 일은 서버에 /scripts
정적 경로를 만들어 파일이 있는 디렉터리에서 파일을 가져오는 것입니다. 따라서 파일이 "./node_modules/bootstrap/dist/"
에 있는 경우. 그러면 페이지의 스크립트 태그는 다음과 같이 보입니다:
<script src="/scripts/bootstrap.min.js"></script>
nodejs와 함께 express를 사용하는 경우 정적 경로는 이와 같이 간단합니다:
app.use('/scripts', express.static(__dirname + '/node_modules/bootstrap/dist/'));
그러면 /scripts/xxx.js
의 모든 브라우저 요청이 __dirname + /node_modules/bootstrap/dist/xxx.js
의 dist
디렉토리에서 자동으로 가져오게 됩니다.
참고: 최신 버전의 NPM은 더 많은 것을 최상위 레벨에 배치하고 깊이 중첩하지 않으므로 최신 버전의 NPM을 사용하는 경우 경로 이름이 OP의 질문과 현재 답변에 표시된 것과 다를 수 있습니다. 그러나 개념은 여전히 동일합니다. 서버 드라이브에서 파일이 물리적으로 어디에 있는지 알아내고 express.static()
으로 app.use()
를 만들어 해당 파일에 대한 의사 경로를 만들어 실제 서버 파일 시스템 조직을 클라이언트에 노출하지 않도록 합니다.
이와 같은 정적 경로를 만들고 싶지 않다면 웹 서버가 /scripts
또는 사용하려는 최상위 지정으로 취급하는 경로에 공개 스크립트를 복사하는 것이 더 나을 수 있습니다. 일반적으로 빌드/배포 프로세스의 일부로 이 복사를 수행할 수 있습니다.
특정 디렉토리에서 특정 파일 하나만 공개하고 해당 디렉토리에 있는 모든 파일을 공개하지 않으려면 다음과 같이 express.static()
을 사용하는 대신 각 파일에 대해 개별 경로를 수동으로 만들 수 있습니다:
<script src="/bootstrap.min.js"></script>
그리고 이에 대한 경로를 생성하는 코드는 다음과 같습니다.
app.get('/bootstrap.min.js', function(req, res) {
res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});
또는 /scripts
를 사용하여 스크립트에 대한 경로를 계속 지정하려는 경우 이렇게 할 수 있습니다:
<script src="/scripts/bootstrap.min.js"></script>
그리고 해당 경로를 생성하는 코드는 다음과 같습니다.
app.get('/scripts/bootstrap.min.js', function(req, res) {
res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});
저는 경로 npm 모듈을 사용한 다음 다음과 같은 작업을 수행합니다:
var path = require('path');
app.use('/scripts', express.static(path.join(__dirname, 'node_modules/bootstrap/dist')));
"나는 내 '굴피레이제스 단순한 복사 붙여넣기 하면 내가' 에 있는 모든 파일을 ./public/modules/ 실행하십시오 작업을 할 수 있습니다 '디렉터리입니다.
gulp.task('modules', function() {
sources = [
'./node_modules/prismjs/prism.js',
'./node_modules/prismjs/themes/prism-dark.css',
]
gulp.src( sources ).pipe(gulp.dest('./public/modules/'));
});
gulp.task('copy-modules', ['modules']);
그러나 이 것은 isn& # 39, t 자동화합니다. 그러나 all you need is 몇 스크립트에만 및 스타일 (계속 목록에), 이 작업을 통해 복사됨 어떻게해야합니다.
나는 이 질문을 통해 업데이트하려면 간소화하는지 솔루션입니다. Node_modules 대한 심볼릭 링크를 만듭니다.
허가합니다 node_modules 가리키는 심볼릭 링크를 만드는 것이 가장 쉬운 방법은 공개 액세스하려면 내에서 데이터베이스에구성원을 node_modules 당신의 공적인 디렉터리입니다. 심볼릭 링크 발쿰치로 것처럼 이 곳에서 https://partner. 파일이 생성됩니다.
예를 들어, 노드 서버에서 파일을 정적 코드 처리를 위한
app.use(serveStatic(path.join(__dirname, 'dist')));
및 _dirname 는 / path / to / app 에서 /path/to/app/dist 정적임 파일은 수 있도록 했다
이렇게 만든 맥 / 리눅스 및 node_modules /path/to/app/node_modules 관심용 대한 심볼릭 링크 보고 있다.
ln -s /path/to/app/node_modules /path/to/app/dist/node_modules
이렇게 또는 windows 의:
mklink /path/to/app/node_modules /path/to/app/dist/node_modules
이제 get request for:
node_modules/some/path
응답을 받을 수 있는 파일 dell.
/path/to/app/dist/node_modules/some/path
이는 정말 파일 dell.
/path/to/app/node_modules/some/path
경우 디렉터리입니다 dell. / path / to / 앱 / dist 안전한 위치에 있지 않은 탓인지 빌드 프로세스를 통해 방해 또는 꿀꿀 추가할 수 있습니다 다음 링크에 대한 별도의 디렉터리입니다 꿀꺽 새 세르베스태틱 매입옵션 다음과 같은 추가
ln -s /path/to/app/node_modules /path/to/app/newDirectoryName/node_modules
또한 노드입니다 추가:
app.use(serveStatic(path.join(__dirname, 'newDirectoryName')));
$deps = "leaflet", "leaflet-search", "material-components-web"
foreach ($dep in $deps) {
Copy-Item "node_modules/$dep/dist" "static/$dep" -Recurse
}
내가 정말 변경되는지 자동 포함시키십시오 색인에서 아래 파일을 html. 도왔으매 폴더에 파일을 추가하면 자동적으로 폴더에서 선택될 것 없이 포함시키십시오 index. html 파일을 필요가 없습니다
//// THIS WORKS FOR ME
///// in app.js or server.js
var app = express();
app.use("/", express.static(__dirname));
var fs = require("fs"),
function getFiles (dir, files_){
files_ = files_ || [];
var files = fs.readdirSync(dir);
for (var i in files){
var name = dir + '/' + files[i];
if (fs.statSync(name).isDirectory()){
getFiles(name, files_);
} else {
files_.push(name);
}
}
return files_;
}
//// send the files in js folder as variable/array
ejs = require('ejs');
res.render('index', {
'something':'something'...........
jsfiles: jsfiles,
});
///--------------------------------------------------
///////// in views/index.ejs --- the below code will list the files in index.ejs
<% for(var i=0; i < jsfiles.length; i++) { %>
<script src="<%= jsfiles[i] %>"></script>
<% } %>
이것이 내가 내 'express 의 서버 설정 한다.
// app.js
const path = require('path');
const express = require('express');
const expressApp = express();
const nm_dependencies = ['bootstrap', 'jquery', 'popper.js']; // keep adding required node_modules to this array.
nm_dependencies.forEach(dep => {
expressApp.use(`/${dep}`, express.static(path.resolve(`node_modules/${dep}`)));
});
< hr/>;
<!-- somewhere inside head tag -->
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css" />
<!-- somewhere near ending body tag -->
<script src="jquery/dist/jquery.js" charset="utf-8"></script>
<script src="popper.js/dist/popper.js" charset="utf-8"></script>
<script src="bootstrap/dist/js/bootstrap.js" charset="utf-8"></script>
행운을 빕니다.