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

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

---

node_modulesHTML 웹 사이트 에 포함하기위한 모범 사례에 관한 질문이 있습니다.

내 node_modules폴더 안에 부트 스트랩이 있다고 상상해보십시오 . 이제 웹 사이트의 배포 버전 (라이브 버전)의 경우 node_modules폴더 안에 Bootstrap 스크립트와 CSS 파일을 어떻게 포함 합니까? 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')));

---

jfriend00에서 언급했듯이 서버 구조를 노출해서는 안됩니다. 프로젝트 종속성 파일을와 같은 것으로 복사 할 수 있습니다 public/scripts. 다음 과 같이 dep-linker를 사용 하여이 작업을 매우 쉽게 수행 할 수 있습니다 .

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/'));

---

빠르고 쉬운 솔루션을 원한다면 (그리고 걸프가 설치되어 있습니다).

내 디렉토리에 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']);

이것의 단점은 자동화되지 않았다는 것입니다. 그러나 필요한 모든 스크립트와 스타일을 복사하여 (목록에 보관) 필요한 경우이 작업을 수행해야합니다.

---

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

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

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

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

__dirname은 / path / to / app를 참조하므로 정적 파일은 / path / to / app / dist에서 제공됩니다.

node_modules는 / path / to / app / node_modules에 있으며 mac / linux에서 다음과 같은 심볼릭 링크를 만듭니다.

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

이제 다음을 요청하십시오.

node_modules/some/path 

에서 파일에 대한 응답을받습니다.

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

이것은 실제로 파일입니다

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

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

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

노드에서 다음을 추가하십시오.

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

---

깨끗한 솔루션을 찾지 못했습니다 (모든 node_modules의 소스를 공개하고 싶지 않습니다). 그냥 Powershell 스크립트를 작성하여 복사했습니다.

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

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

---

인덱스 html의 파일을 AUTO-INCLUDE로 변경했습니다. 따라서 폴더에 파일을 추가하면 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}`)));
});

---

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

행운을 빕니다...

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