node_modules 폴더 안에 있는 스크립트를 포함하는 방법은 무엇입니까?

node_modules 폴더 안에 있는 스크립트를 포함하는 방법은 무엇입니까?

다음을 포함한 모범 사례에 대해 질문이 있습니다.node_modulesHTML 웹 사이트로 이동합니다.

내안부트트있상다상요세보해고이랩스 안에 상상해보세요.node_modules폴더를 누릅니다. 웹, 을 제이웹사의대, 해까에니습겠 에 있는 CSS 파일을 어떻게 합니까?node_modules폴더? 그 을 두고 이 됩니까?Bootstrap을 폴더 안에 두고 다음과 같은 작업을 하는 것이 말이 됩니까?

<script src="./node_modules/bootstrap/dist/bootstrap.min.js"></script>

아니면 gulp 파일에 규칙을 추가하여 해당 파일을 dist 폴더에 복사해야 합니까?아니면 어떻게 해서든 내 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에서 가니다옵져에서 .dist 위치:__dirname + /node_modules/bootstrap/dist/xxx.js.

참고: 최신 버전의 NPM은 더 많은 것을 최상위 수준에 배치하며, 그렇게 깊게 중첩되지는 않습니다. 따라서 최신 버전의 NPM을 사용하는 경우, 경로 이름은 OP의 질문과 현재 답변에 표시된 것과 다릅니다.하지만, 그 개념은 여전히 같습니다.서버 드라이브에서 파일이 물리적으로 위치한 위치를 확인하고 다음을 수행합니다.app.use()와 함께express.static()실제 서버 파일 시스템 구성이 클라이언트에 노출되지 않도록 이러한 파일에 대한 유사 경로를 만듭니다.

---

으로 취급하는 이 더 입니다./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')));

중요: path.join을 사용하여 시스템에 구애받지 않는 방식으로 경로를 결합합니다. 즉, 윈도우즈와 유닉스에서는 서로 다른 경로 구분 기호(/ 및 \)가 있습니다.

빠르고 쉬운 해결책을 원하는 경우(흡입이 설치된 경우).

내 안에서gulpfile.js는 필요한 을 모두 필파저장간는단복한사경작에 합니다../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']);

이것의 단점은 자동화되지 않는다는 것입니다.그러나 몇 개의 스크립트와 스타일을 복사하여 목록에 보관하기만 하면 됩니다.

했듯이, 당신은 구조를 노출시켜서는 안 됩니다.jfriend00은 당신의 서버 구조를 는 안 .프로젝트 종속성 파일을 다음과 같은 위치에 복사할 수 있습니다.public/scripts다음과 같은 디플링커를 사용하면 매우 쉽게 이 작업을 수행할 수 있습니다.

var DepLinker = require('dep-linker');
DepLinker.copyDependenciesTo('./public/scripts')
// Done

디렉터리 'node_modules'가 현재 디렉터리에 없을 수 있으므로 경로를 동적으로 확인해야 합니다.

var bootstrap_dir = require.resolve('bootstrap')
                           .match(/.*\/node_modules\/[^/]+\//)[0];
app.use('/scripts', express.static(bootstrap_dir + 'dist/'));

이것이 내가 내 컴퓨터에 설정한 것입니다.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}`)));
});

---

<!-- 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>

행운을 빕니다...

깨끗한 솔루션(모든 node_modules의 소스를 노출하고 싶지 않음)을 찾지 못했기 때문에 Powershell 스크립트를 작성하여 복사했습니다.

$deps = "leaflet", "leaflet-search", "material-components-web"

foreach ($dep in $deps) {
    Copy-Item "node_modules/$dep/dist" "static/$dep" -Recurse
}

저는 이 질문을 더 쉬운 해결책으로 업데이트하고 싶습니다.node_modules에 대한 심볼 링크를 만듭니다.

node_modules에 대한 공용 액세스 권한을 부여하는 가장 쉬운 방법은 공용 디렉토리 내에서 node_modules를 가리키는 심볼 링크를 만드는 것입니다.심볼릭 링크는 링크가 생성되는 모든 곳에 파일이 존재하는 것처럼 만듭니다.

예를 들어 노드 서버에 정적 파일을 제공하기 위한 코드가 있는 경우

app.use(serveStatic(path.join(__dirname, 'dist')));

그리고 __hostname은 /path/to/app을 참조하여 정적 파일이 /path/to/app/dist에서 제공되도록 합니다.

node_messages는 /path/to/app/node_messages에 있는 다음 mac/linux에서 다음과 같은 심볼 링크를 생성합니다.

ln -s /path/to/app/node_modules /path/to/app/dist/node_modules

또는 창에서 다음과 같이 표시됩니다.

mklink /path/to/app/node_modules /path/to/app/dist/node_modules

이제 다음에 대한 가져오기 요청:

node_modules/some/path 

다음 위치에 있는 파일로 응답을 수신합니다.

/path/to/app/dist/node_modules/some/path 

그것이 정말로 파일입니다.

/path/to/app/node_modules/some/path

gulp 또는 grunt을 사용한 빌드 프로세스의 간섭 때문인지 /path/to/app/dist의 디렉토리가 안전한 위치가 아닌 경우 링크에 대한 별도의 디렉토리를 추가하고 다음과 같은 새 serverStatic 호출을 추가할 수 있습니다.

ln -s /path/to/app/node_modules /path/to/app/newDirectoryName/node_modules

노드 추가:

app.use(serveStatic(path.join(__dirname, 'newDirectoryName')));

인덱스 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>
<% } %>

html에서 node_modules의 여러 파일을 사용하려면 가장 좋은 방법은 이 파일들을 배열에 넣은 다음 루프하여 웹 클라이언트에서 볼 수 있도록 하는 것입니다. 예를 들어 node_modules의 filepond 모듈을 사용하는 것입니다.

const filePondModules = ['filepond-plugin-file-encode', 'filepond-plugin-image-preview', 'filepond-plugin-image-resize', 'filepond']
filePondModules.forEach(currentModule => {
    let module_dir = require.resolve(currentModule)
                           .match(/.*\/node_modules\/[^/]+\//)[0];
    app.use('/' + currentModule, express.static(module_dir + 'dist/'));
})

그런 다음 html(또는 레이아웃) 파일에서 다음과 같이 호출합니다.

    <link rel="stylesheet" href="/filepond/filepond.css">
    <link rel="stylesheet" href="/filepond-plugin-image-preview/filepond-plugin-image-preview.css">
...
    <script src="/filepond-plugin-image-preview/filepond-plugin-image-preview.js" ></script>
    <script src="/filepond-plugin-file-encode/filepond-plugin-file-encode.js"></script>
    <script src="/filepond-plugin-image-resize/filepond-plugin-image-resize.js"></script>
    <script src="/filepond/filepond.js"></script>

여러 파일에 연결하는 경우 화이트리스트를 만든 다음 sendFile()을 사용합니다.

app.get('/npm/:pkg/:file', (req, res) => {
    const ok = ['jquery','bootstrap','interactjs'];
    if (!ok.includes(req.params.pkg)) res.status(503).send("Not Permitted.");
    res.sendFile(__dirname + `/node_modules/${req.params.pkg}/dist/${req.params.file}`);
    });

예를 들어 /npm/bootstrap/bootstrap.js, /npm/bootstrap/bootstrap.css 등에 안전하게 연결할 수 있습니다.

별도로 express.static을 사용하여 화이트리스트를 작성하는 방법이 있는지 알고 싶습니다.

언급URL : https://stackoverflow.com/questions/27464168/how-to-include-scripts-located-inside-the-node-modules-folder