版权归作者所有，转载请注明出处
symfony4.2通过encore导入js与css
本来想写的是在symfony4.2中使用vue的，但发现encore在symfony4.2中的用法也symfony4.0的用法已经有所差别了，所以就顺道先写一下encore的用法，算是做个笔记吧，免得一段时间不用又要回头查英文资料。
首先，encore的基本用法，在官方的doc里面已有写，只是有点散。英文不错的可以直接去看。
一。symfony环境安装
1.安装symfony（有点废话，就不多展开说了），当前版本是4.2
composer create-project symfony/website-skeleton my-project（my-project你的项目目录名）
另外要使用encore还需要在系统开发环境下（是系统环境不仅仅是symfony目录的环境）安装npm或yarn，没有的话就不用继续向下看了。怎么安装请参考其他样关文章。
2.安装encore
！！！进入自己的项目目录！！！
composer require encore
yarn install
至于yarn这东西，众所周知的原因，连接时灵时不灵。三天前老是连不上，这两天我也没用梯子，莫明又好了。用yarn前提是你要先装，别外貌似yarn是替代npm的，应该也可以用npm或cnpm装吧。cnpm就是在中国的服务器，连接应该没问题。不过我对npdejs不熟，不行的朋友找熟悉nodejs的朋友问一下yarn install能不能被cnpm代替。
二。使用encore
安装好环境之后encore会在主目录assets下建立css与js文件夹以前各自文件夹里的app.css与app.js。没有的话，可能安装失败了。可以自己试试建立，下面是大概目录结构，另外webpack.config.js也是安装encore时安装的，也是使用encore必需用到的。
你的项目目录
𠃊assets
| 𠃊css
| 𠃊app.css
| 𠃊js
| 𠃊app.js
|
𠃊...省略其他与本文无关文件夹
|
...省略其他与本文无关文件
|
𠃊webpack.config.js
1。建立一个页面，默认安装的symfony是没有默认页面的，就算启动后的主页也不是默认的页面
命令行输入
php bin/console make:controller
make:controller用法，以及页面、router、controller的关系等不在本文分享范围内。
接着输入自己的路由名，我输入的是test1。于是目录通过make变成以下这样，多出来几个跟test1相关的文件与文件
你的项目目录
𠃊assets
| 𠃊css
| | 𠃊app.css
| 𠃊js
| 𠃊app.js
𠃊src
| 𠃊Controller
| 𠃊Test1Controller.php
𠃊templates
| 𠃊test1
| 𠃊index.html.twig
|
𠃊...省略其他与本文无关文件夹
|
...省略其他与本文无关文件
|
𠃊webpack.config.js
2。修改webpack.config.js
安装encore已经在webpack.config.js里自带了一行，作为官方示例，示例是可以删掉的，熟练的话也可以自己写个新的webpack.config.js，里面的东西不多。其中安装好的webpack.config.js里有这么一行
.addEntry('app', './assets/js/app.js')
app.js就是上面目录结构里的app.js，是装encore时自动建立的。另外，从这里开始跟symfony4.0有所差别了，在symfony4.0的webpack.config.js里还可以引入css，可以有这么一行.addStyleEntry('css/app', './assets/css/app.css')。
我们写上我们自己文件的引用，大家就不要吐槽oldapp这个名字了。
.addEntry('oldapp', './assets/js/oldapp.js')
3。建立自己的js与css文件
在css文件夹建立oldapp.css，里面随便写点什么，比如下面的
body {
background-color: red;
}
在js文件夹建立oldapp.js，在这里引用css文件。下面是oldapp.js的内容，除了非必须的注释，其实就两行。
//引入css
require('../css/oldapp.css');
//随便写再点什么，就写个console.log好了
console.log('你的oldapp.js运行成功');
怕中文有所影的话，可以自己把中文改成英文。
文件结构变成这样
你的文件结构
𠃊assets
| 𠃊css
| | 𠃊app.css
| | 𠃊oldapp.css
| 𠃊js
| 𠃊app.js
| 𠃊oldapp.js
𠃊src
| 𠃊Controller
| 𠃊Test1Controller.php
𠃊templates
| 𠃊test1
| 𠃊index.html.twig
|
𠃊...省略其他与本文无关文件夹
|
...省略其他与本文无关文件
|
𠃊webpack.config.js
3。在页面中导入css与js
打开/template/test1/index.html.twig文件，make:controller默认的内容如下
{% extends 'base.html.twig' %}
{% block title %}Hello Test1Controller!{% endblock %}
{% block body %}
<style>
.example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
.example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>
<div class="example-wrapper">
<h1>Hello {{ controller_name }}! ✅</h1>
This friendly message is coming from:
<ul>
<li>Your controller at <code><a href="{{ '/var/www/html/symfonyvue/src/Controller/Test1Controller.php'|file_link(0) }}">src/Controller/Test1Controller.php</a></code></li>
<li>Your template at <code><a href="{{ '/var/www/html/symfonyvue/templates/test1/index.html.twig'|file_link(0) }}">templates/test1/index.html.twig</a></code></li>
</ul>
</div>
{% endblock %}
加入自己的代码，变成如下
{% extends 'base.html.twig' %}
{% block title %}Hello Test1Controller!{% endblock %}
{% block stylesheets %}
{# 导入css文件 #}
{{ encore_entry_link_tags('oldapp') }}
{% endblock %}
{% block javascripts %}
{# 导入js文件 #}
{{ encore_entry_script_tags('oldapp') }}
{% endblock %}
{% block body %}
<style>
.example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
.example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>
<div class="example-wrapper">
<h1>Hello {{ controller_name }}! ✅</h1>
This friendly message is coming from:
<ul>
<li>Your controller at <code><a href="{{ '/var/www/html/symfonyvue/src/Controller/Test1Controller.php'|file_link(0) }}">src/Controller/Test1Controller.php</a></code></li>
<li>Your template at <code><a href="{{ '/var/www/html/symfonyvue/templates/test1/index.html.twig'|file_link(0) }}">templates/test1/index.html.twig</a></code></li>
</ul>
</div>
{% endblock %}
可以看出来，4.2官方建议导入的方式是使用encore_entry_link_tags函数。而oldapp这个名字就是webpack里定义的.addEntry('oldapp', './assets/js/oldapp.js')。
这样的好处是写template与就是写页面的人，并不需要关心css与js的路径在哪，也不需要使用asset函数。
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('build/oldapp.css') }}">
{# 没装asset的也可以不用上面一行用下面一行 #}
{# <link rel="stylesheet" href="/build/oldapp.css"> #}
{% endblock %}
{% block javascripts %}
<script src="{{ asset('build/runtime.js') }}"></script>
<script src="{{ asset('build/oldapp.js') }}"></script>
{# 没装asset的也可以不用上面一行用下面两行 #}
{#
<script src="/build/runtime.js"></script>
<script src="/build/oldapp.js"></script>
#}
{% endblock %}
这里又有与4.0的不同了，同样是直接引用js文件。在引用js方面4.0只需要引用oldapp.js就行了。在4.2中要多引用一个runtime.js。我试过不引用runtime.js而直接引用oldapp是不行的。原理或框架设计我也研究过，只是使用上只能这样。
4.2中建议两种方式的引用都包在{% block stylesheets %}{% endblock %}与{% block javascripts %}{% endblock %}中，虽然直接引用用4.0的方法貌似也能用。但毕竟官方推荐新方式。
另外，引用要注意先后，比如下一篇文章要说的vuejs。本文的js与css的引用放在html前，就像很多js与css都在<head>中引用一样。但有一些，比如vuejs的引用。vuejs是寻找html里的标记，然后再把自己的内容放到标记了的html里去。如果vuejs放在html之前，vuejs就找不到html的标记了，就会报错。大家根据自己的需求决定插入位置，并不要求一定放前面。
4。建立/public/build/下的js与css
虽然在webpack里引用的是assets下的js与css，在html.twig里直接引用时又是引用/build下的js与css。但实际上引用的都是public/build下的js与css。为什么会这样，这就和symfony的结构与encore和webpack的结构相关，不是本文内容
建立并不是自己手工建立，是通过代码行建立,默认在public甚至连build这个文件夹都没有。
在代码行输入
yarn encore dev
就会自动建立build文件夹与js和css文件。另外运行npm也是可以的，如下
npm run dev
还有就是yarn encore dev --watch（用于开发时实时同步源文件与build下的文件）或yarn encore production（压缩js与css文件用于实际应用）这些都是yarn，npm，webpack等nodejs应用，甚至都不是symfony的相关问题，不在本文分享内容之内。一般只要知道通过代码行建立public/build下的js与css就行了。建立后新的目录结构如下：
你的项目目录
𠃊assets
| 𠃊css
| | 𠃊app.css
| | 𠃊oldapp.css
| 𠃊js
| 𠃊app.js
| 𠃊oldapp.js
𠃊src
| 𠃊Controller
| 𠃊Test1Controller.php
𠃊templates
| 𠃊test1
| 𠃊index.html.twig
|
𠃊public
| 𠃊build
| 𠃊oldapp.js
| 𠃊oldapp.css
| |
| ...省略其他与本文无关文件
| |
| 𠃊app.js （安装encore时自带的app.js示例引致此文件出现）
| 𠃊app.css（安装encore时自带的app.css示例引致此文件出现）
|
𠃊...省略其他与本文无关文件夹
|
...省略其他与本文无关文件
|
𠃊webpack.config.js
三。启动symfony后台以及查看页面
在代码行输入
php bin/console server:start
在浏览器浏览localhost:8000/test1访问页面。看看background-color有没变化，以前在浏览器开发模式查看console有没输出你的oldapp.js运行成功。
至此，symfony4.2通过encore导入js与css结束，下面一篇会写symfony4.2使用vuejs
