React는 create-react-app을 기반으로 프로젝트를 생성합니다.
- 亚连원래의
- 2018-05-30 14:12:101768검색
이 글은 주로 create-react-app을 기반으로 한 리액트 프로젝트 생성을 소개하고 참고용으로 올려드립니다.
create-react-app이란
create-react-app은 js 라이브러리로, 빌드할 때 웹팩 구성, 서버 디버깅, 스크립트 실행 등의 문제를 없애고 쉽게 React 프로젝트를 빌드할 수 있습니다. , 이 라이브러리를 사용하면 한 번의 클릭으로 React 프로젝트의 생성 및 초기화 프로젝트를 완료할 수 있습니다
먼저 create-react-app을 사용하여 React 프로젝트를 생성해야 합니다. https:/를 참조하세요. /github.com/facebookincubator/create -react-app
참고: "[ ]"로 묶인 모든 내용은 사용자 정의 가능한 콘텐츠입니다. 예: cd [프로젝트 이름], 실제로는 cd my-app 또는 cd my-일 수 있습니다. 프로젝트. 즉, "[ ]" 패키지의 내용은 컨텍스트의 해당 변수만 나타냅니다.
npm install -g create-react-app create-react-app [project-name] cd [project-name]
위 명령을 실행한 후, 이미 새로 생성된 프로젝트에 들어와 있으며 이때 npm run start와 npm run build를 실행합니다. 그러나 모든 구성은 기본적으로 숨겨져 있습니다. 구성을 사용자 정의하려면 다음 명령을 실행해야 합니다.
npm run eject
이때 명령을 되돌릴 수 없다는 메시지가 표시됩니다. 계속하시겠습니까? y 모든 구성 항목이 나오도록 합니다. 이때 다음과 같은 일부 사용자 정의 구성을 만들 수도 있습니다.
빌드 후 출력 위치 수정
js / css / img 및 기타 정적 리소스는 기본적으로 빌드 -> 정적으로 출력되며 해당 구성은 항목은 config -> webpack.config.prod.js에 있습니다.
js는 출력 속성에 있으며 60번째 줄에 있습니다.
css는 cssFilename 변수의 시작 부분에 38번째 줄에 선언되어 있습니다.
그림은 모듈의 로더 구성에 있습니다. 규칙, 라인 143; 맵 파일은 devtool 속성에 의해 제어됩니다. 맵을 원하지 않으면 라인 57에 대해 주석을 달아주세요.
manifest.json은 ManifestPlugin 구성에 있습니다. , 294행에 대해
기본 템플릿은 HtmlWebpackPlugin 구성에 있지만 './paths.js' 파일을 참조하고 있는 것을 볼 수 있으므로 config -> paths에서 appHtml 속성을 수정해야 합니다.
빌드 디렉토리를 구축할 때 기본적으로 지워집니다. 스크립트의 구성 항목은 fs.emptyDirSync(paths.appBuild)입니다. -> 이 문장을 주석 처리하면 이전 파일이 삭제되지 않습니다. (그레이스케일 릴리스 중에 사용될 수 있음)
eject 없이 구성을 수정하는 다른 방법은 없습니다
모든 구성 파일을 노출하는 npm 실행 외에도 구성을 수정하는 다른 방법이 있습니다. 이 기사에서는 내용을 확장하지 않고 관련 링크만 제공합니다.
더 우아한 방법(어떤 사람들은 생각함)은 구성 재정의를 달성하기 위해 반응 앱 재배선 플러그인을 도입하는 것입니다. 루트 디렉터리에 새 config-overrides.js 파일을 만들고 구성하려는 항목을 작성해야 합니다(왜 다른 구성이 있습니까...). 또한 npm start 및 기타 관련 명령을 다시 작성해야 합니까? 세부정보를 보려면
또 다른 예시는 create-react-app git 홈페이지에서 권장하는 CSS 전처리기 추가(Sass, Less 등)를 참고하세요. 일반적인 아이디어는 먼저 노드 환경에서 sass를 컴파일할 수 있는 플러그인 node-sass-chokidar를 설치한 다음 npm-run-all을 사용하여 npm start 및 watch-css(sass 파일을 모니터링하는 명령)를 실행하는 것입니다. 같은 시간. 개인적으로는 큰 원처럼 느껴지므로 다시 한번 논의해 보겠습니다. . .
react 등은 전역 변수로 패키징되지 않습니다
cdn을 사용하기 위해 페이지 내에서 React나 다른 유사한 라이브러리의 스크립트 태그를 인용하는 경우가 많아 브라우저 환경에 해당 전역 변수가 있도록 하고, 동시에 js 크기를 줄이세요. 반응을 예로 들어보겠습니다.
먼저 config -> webpack.config.prod.js 구성에 다음 코드를 추가합니다.
module.exports = {
...
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
...
}여기서 html-webpack-plugin 플러그인 구성의 템플릿 파일을 수정해야 합니다. 전역 변수를 추가해야 하므로 해당 스크립트를 추가하면 됩니다. public -> index.html을 예로 들어 보겠습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <!-- code here --> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <p id="root"></p> <!-- code here --> <!-- 新插入的两个js --> <script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react.min.js"></script> <script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react-dom.min.js"></script> </body> </html>
답변: 위에서 언급한 것처럼 가져오기와 외부를 제거하면 빌드된 파일이 브라우저 측에서 원활하게 실행될 수 있습니다. 그러나 개발 중에 서버가 시작되면 서버 측에서 참조를 분석할 수 없으며 핫 업데이트를 수행할 수 없습니다. 또한 프런트엔드 및 백엔드 동형의 경우 서버 측에서 종속성을 찾을 수 없습니다. 따라서 정적 파일 모니터링을 켜고 수동으로 브라우저를 새로 고치면 가져오기 및 외부 없이는 이론적으로 문제가 없습니다.
Sass 이하 설치(Sass를 예로 들어)
npm install sass-loader node-sass --save-dev또는
npm install less-loader less --save-dev
安装后修改config -> webpack.config.dev.js 和 webpack.config.prod.js，分别在css的loader配置里面修改两处：
一是 test: /\.css$/ 增加scss和sass；二是use里面最后再加个loader，直接加 "sass-loader" 就可以了，也不用配置别的了（less同）。
//test: /\.css$/
test: /\.(css|scss|sass)$/
...
use:[
{
...
},
"sass-loader"
]
添加ant-design
安装antd及按需加载的插件babel-plugin-import，参考https://ant.design/docs/react/introduce-cn
npm install antd babel-plugin-import --save-dev
在config -> webpack.config.dev.js 和 webpack.config.prod.js 里（或者 .babelrc 文件）的babel-loader的options配置里，加入如下代码：
plugins: [
['import', { libraryName: 'antd', style: 'css' }] // `style: true` 会加载 less 文件
]
如果启用了 style:true 那就必须是装less了
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
위 내용은 React는 create-react-app을 기반으로 프로젝트를 생성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!